import { Card } from './Card'

interface ChartPanelProps {
  title: string
  data: Record<string, number>
}

const BAR_COLOR = 'bg-blue-500'

export function ChartPanel({ title, data }: ChartPanelProps) {
  const entries = Object.entries(data)
  const max = Math.max(1, ...entries.map(([, value]) => value))

  return (
    <Card title={title}>
      <div className="flex flex-col gap-2">
        {entries.map(([label, value]) => (
          <div key={label} className="flex items-center gap-3">
            <span className="w-20 shrink-0 text-xs capitalize text-gray-600 dark:text-gray-400">{label}</span>
            <div className="h-2 flex-1 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
              <div className={`h-full ${BAR_COLOR}`} style={{ width: `${(value / max) * 100}%` }} />
            </div>
            <span className="w-6 shrink-0 text-right text-xs text-gray-500 dark:text-gray-500">{value}</span>
          </div>
        ))}
      </div>
    </Card>
  )
}