import React from 'react';

const BarChart = ({ data = [], width = 400, height = 80, color = 'currentColor' }) => {
  if (!data || data.length === 0) return null;

  const max = Math.max(...data, 1);
  const barCount = data.length;
  const gap = 4;
  const totalGap = (barCount - 1) * gap;
  const barWidth = Math.max(8, (width - totalGap) / barCount);
  const totalUsed = barCount * barWidth + totalGap;
  const offsetX = (width - totalUsed) / 2;

  return (
    <svg
      width='100%'
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      preserveAspectRatio='none'
    >
      {data.map((v, i) => {
        const barH = Math.max(2, (v / max) * (height - 4));
        const x = offsetX + i * (barWidth + gap);
        const y = height - barH;
        const rx = Math.min(3, barWidth / 3);
        return (
          <rect
            key={i}
            x={x}
            y={y}
            width={barWidth}
            height={barH}
            rx={rx}
            fill={color}
            opacity={0.85}
          />
        );
      })}
    </svg>
  );
};

export default BarChart;