interface SpendBar {
  label: string;
  amount: number;
}

interface SparkBarsProps {
  data: SpendBar[];
  height?: number;
}

export function SparkBars({ data, height = 140 }: SparkBarsProps) {
  const max = Math.max(...data.map((d) => d.amount), 1);
  const svgWidth = 20 + data.length * 56;

  return (
    <svg
      viewBox={`0 0 ${svgWidth} ${height + 20}`}
      width="100%"
      height={height + 20}
      preserveAspectRatio="none"
    >
      {data.map((d, i) => {
        const barHeight = (d.amount / max) * (height - 20);
        const x = 20 + i * 56;
        const isLast = i === data.length - 1;
        return (
          <g key={d.label}>
            <rect
              x={x}
              y={height - barHeight}
              width="36"
              height={barHeight}
              rx="3"
              fill={isLast ? 'var(--brand)' : 'var(--brand-soft)'}
              stroke={isLast ? 'var(--brand-deep)' : 'none'}
            />
            <text
              x={x + 18}
              y={height + 15}
              textAnchor="middle"
              fontSize="9"
              fill="var(--ink-faint)"
            >
              {d.label}
            </text>
            <text
              x={x + 18}
              y={height - barHeight - 4}
              textAnchor="middle"
              fontSize="9"
              fill={isLast ? 'var(--ink)' : 'var(--ink-muted)'}
              fontWeight={isLast ? 600 : 400}
            >
              {(d.amount / 1000).toFixed(0)}k
            </text>
          </g>
        );
      })}
    </svg>
  );
}
