"use client";

import dynamic from 'next/dynamic';

// Dynamic imports to avoid SSR issues with Recharts
const BarChart = dynamic(() => import('./BarChart'), { ssr: false });
const PieChart = dynamic(() => import('./PieChart'), { ssr: false });
const LineChart = dynamic(() => import('./LineChart'), { ssr: false });

export interface ChartData {
    type: 'bar' | 'line' | 'pie' | 'donut';
    title?: string;
    data: Array<{ [key: string]: any }>;
    xKey?: string;
    yKey?: string;
    lines?: Array<{ key: string; color?: string; name?: string }>;
    xAxisLabel?: string; // New
    yAxisLabel?: string; // New
}

interface ChartRendererProps {
    chart: ChartData;
}

export default function ChartRenderer({ chart }: ChartRendererProps) {
    const { type, title, data, xKey, yKey, lines, xAxisLabel, yAxisLabel } = chart;

    switch (type) {
        case 'bar':
            return (
                <BarChart
                    data={data}
                    title={title}
                    xKey={xKey || 'name'}
                    yKey={yKey || 'value'}
                    xAxisLabel={xAxisLabel}
                    yAxisLabel={yAxisLabel}
                />
            );

        case 'line':
            return (
                <LineChart
                    data={data}
                    title={title}
                    xKey={xKey || 'name'}
                    lines={lines || [{ key: yKey || 'value' }]}
                />
            );

        case 'pie':
            return (
                <PieChart
                    data={data}
                    title={title}
                    donut={false}
                />
            );

        case 'donut':
            return (
                <PieChart
                    data={data}
                    title={title}
                    donut={true}
                />
            );

        default:
            return (
                <div className="text-sm text-slate-500 p-4 bg-slate-50 rounded-lg">
                    Unknown chart type: {type}
                </div>
            );
    }
}