frontend/src/components/charts/BarChart.tsx

"use client";

import {
    BarChart as RechartsBarChart,
    Bar,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    Legend,
    ResponsiveContainer,
    Cell,
    Label // Import Label
} from 'recharts';

interface BarChartProps {
    data: Array<{ [key: string]: any }>;
    title?: string;
    xKey?: string;
    yKey?: string;
    color?: string;
    height?: number;
    horizontal?: boolean;
    xAxisLabel?: string; // New prop
    yAxisLabel?: string; // New prop
}

// Color palette for multiple bars
const COLORS = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#ec4899'];

export default function BarChart({
    data,
    title,
    xKey = 'name',
    yKey = 'value',
    color = '#6366f1',
    height = 300,
    horizontal = false,
    xAxisLabel,
    yAxisLabel
}: BarChartProps) {
    return (
        <div className="w-full bg-white rounded-xl border border-slate-100 p-4 shadow-sm">
            {title && (
                <h3 className="text-sm font-semibold text-slate-700 mb-4">{title}</h3>
            )}
            <ResponsiveContainer width="100%" height={height}>
                <RechartsBarChart
                    data={data}
                    layout={horizontal ? 'vertical' : 'horizontal'}
                    margin={{ top: 5, right: 30, left: 20, bottom: 20 }} // Increased bottom margin for label
                >
                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                    {horizontal ? (
                        <>
                            <XAxis type="number" tick={{ fill: '#64748b', fontSize: 12 }}>
                                {xAxisLabel && <Label value={xAxisLabel} offset={-10} position="insideBottom" style={{ fill: '#64748b', fontSize: 12 }} />}
                            </XAxis>
                            <YAxis
                                dataKey={xKey}
                                type="category"
                                tick={{ fill: '#64748b', fontSize: 12 }}
                                width={100}
                            >
                                {yAxisLabel && <Label value={yAxisLabel} angle={-90} position="insideLeft" style={{ fill: '#64748b', fontSize: 12 }} />}
                            </YAxis>
                        </>
                    ) : (
                        <>
                            <XAxis
                                dataKey={xKey}
                                tick={{ fill: '#64748b', fontSize: 12 }}
                                angle={-45}
                                textAnchor="end"
                                height={80}
                            >
                                {xAxisLabel && <Label value={xAxisLabel} offset={0} position="insideBottom" dy={10} style={{ fill: '#64748b', fontSize: 12 }} />}
                            </XAxis>
                            <YAxis tick={{ fill: '#64748b', fontSize: 12 }}>
                                {yAxisLabel && <Label value={yAxisLabel} angle={-90} position="insideLeft" style={{ fill: '#64748b', fontSize: 12 }} />}
                            </YAxis>
                        </>
                    )}
                    <Tooltip
                        contentStyle={{
                            background: 'white',
                            border: '1px solid #e2e8f0',
                            borderRadius: '8px',
                            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'
                        }}
                        labelStyle={{ color: '#334155', fontWeight: 600 }}
                    />
                    <Legend wrapperStyle={{ fontSize: '12px', paddingTop: '10px' }} />
                    <Bar
                        dataKey={yKey}
                        radius={[4, 4, 0, 0]}
                        name={yAxisLabel || yKey.charAt(0).toUpperCase() + yKey.slice(1)} // Use label as legend name if available
                    >
                        {data.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                        ))}
                    </Bar>
                </RechartsBarChart>
            </ResponsiveContainer>
        </div>
    );
}