// Bar Chart Component (Recharts wrapper)
import { BarChart as RechartsBarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

interface BarChartProps {
  data: Array<Record<string, any>>;
  bars: Array<{
    key: string;
    name: string;
    color: string;
  }>;
  height?: number;
  xAxisKey?: string;
  horizontal?: boolean;
}

export default function BarChart({ data, bars, height = 300, xAxisKey = 'name', horizontal = false }: BarChartProps) {
  return (
    <ResponsiveContainer width="100%" height={height}>
      <RechartsBarChart data={data} layout={horizontal ? 'vertical' : 'horizontal'}>
        <CartesianGrid strokeDasharray="3 3" />
        {horizontal ? (
          <>
            <XAxis type="number" />
            <YAxis dataKey={xAxisKey} type="category" width={100} />
          </>
        ) : (
          <>
            <XAxis dataKey={xAxisKey} />
            <YAxis />
          </>
        )}
        <Tooltip />
        <Legend />
        {bars.map((bar) => (
          <Bar key={bar.key} dataKey={bar.key} name={bar.name} fill={bar.color} />
        ))}
      </RechartsBarChart>
    </ResponsiveContainer>
  );
}

