"use client";

import React from "react";
import { KpiItem } from "./types";

interface KpiBarProps {
  items: KpiItem[];
}

export function KpiBar({ items }: KpiBarProps) {
  const getStrokeDashoffset = (percentage: number) => {
    const circumference = 264; // 2 * PI * 42
    return circumference - (circumference * percentage) / 100;
  };

  const formatValue = (value: number) => {
    if (value >= 1000) {
      return value.toLocaleString();
    }
    return value.toString();
  };

  return (
    <div className="pop-dashboard-kpi-bar">
      {items.map((item) => (
        <div key={item.id} className="pop-dashboard-kpi-item">
          <div className="pop-dashboard-kpi-gauge">
            <svg viewBox="0 0 100 100" width="52" height="52">
              <circle
                className="pop-dashboard-kpi-gauge-bg"
                cx="50"
                cy="50"
                r="42"
              />
              <circle
                className={`pop-dashboard-kpi-gauge-fill kpi-color-${item.color}`}
                cx="50"
                cy="50"
                r="42"
                strokeDasharray="264"
                strokeDashoffset={getStrokeDashoffset(item.percentage)}
              />
            </svg>
            <span className={`pop-dashboard-kpi-gauge-text kpi-color-${item.color}`}>
              {item.percentage}%
            </span>
          </div>
          <div className="pop-dashboard-kpi-info">
            <div className="pop-dashboard-kpi-label">{item.label}</div>
            <div className={`pop-dashboard-kpi-value kpi-color-${item.color}`}>
              {formatValue(item.value)}
              <span className="pop-dashboard-kpi-unit">{item.unit}</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}