'use client';

interface BarData {
  label: string;
  value: number;
  color?: string;
}

interface SimpleBarChartProps {
  data: BarData[];
  height?: number;
  primaryColor?: string;
}

export default function SimpleBarChart({
  data,
  height = 140,
  primaryColor = '#405189',
}: SimpleBarChartProps) {
  const max = Math.max(...data.map(d => d.value), 1);
  const itemW = 48;
  const svgW = data.length * itemW;
  const svgH = height + 28;

  return (
    <svg
      width="100%"
      height={svgH}
      viewBox={`0 0 ${svgW} ${svgH}`}
      preserveAspectRatio="xMidYMid meet"
    >
      {[0.25, 0.5, 0.75, 1].map(pct => (
        <line
          key={pct}
          x1={0} y1={height * (1 - pct)}
          x2={svgW} y2={height * (1 - pct)}
          stroke="#e2e8f0"
          strokeWidth={0.5}
          strokeDasharray="4,3"
        />
      ))}
      {data.map((item, i) => {
        const barW = 30;
        const barH = Math.max((item.value / max) * height, 2);
        const x = i * itemW + (itemW - barW) / 2;
        const y = height - barH;
        return (
          <g key={item.label}>
            <rect
              x={x} y={y}
              width={barW} height={barH}
              rx={4}
              fill={item.color ?? primaryColor}
              opacity={0.85}
            />
            <text
              x={x + barW / 2} y={height + 18}
              textAnchor="middle"
              fontSize={9}
              fill="#94a3b8"
            >
              {item.label}
            </text>
          </g>
        );
      })}
    </svg>
  );
}