'use client';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@/components/ui/chart';
import { LabelList, Pie, PieChart } from 'recharts';

const chartConfig = {
    count: { label: 'Events' },
    holiday: { label: 'Holiday', color: '#FF718B' },
    exam: { label: 'Exam', color: '#7C3AED' },
    event: { label: 'Event', color: '#3E6FF3' },
    activity: { label: 'Activity', color: '#10B981' },
} satisfies ChartConfig;

interface Props {
    data?: { browser: string; visitors: number; fill: string }[];
}

export function CalendarActivityChart({ data = [] }: Props) {
    return (
        <Card className="flex flex-1 flex-col">
            <CardHeader className="flex flex-row items-center justify-between px-2 pb-4">
                <div>
                    <CardTitle className="text-lg font-bold text-foreground/80">Calendar Activity</CardTitle>
                    <p className="text-xs text-foreground/70">Events by type this month</p>
                </div>
            </CardHeader>
            <CardContent className="flex-1 pb-0">
                <ChartContainer config={chartConfig} className="mx-auto aspect-square h-[320px]">
                    <PieChart>
                        <ChartTooltip content={<ChartTooltipContent nameKey="visitors" hideLabel />} />
                        <Pie data={data} dataKey="visitors">
                            <LabelList
                                dataKey="browser"
                                className="fill-background"
                                stroke="none"
                                fontSize={12}
                                formatter={(value: string) => chartConfig[value as keyof typeof chartConfig]?.label ?? value}
                            />
                        </Pie>
                        <ChartLegend
                            content={<ChartLegendContent nameKey="browser" />}
                            className="*:justify-sm -translate-y-2 flex-wrap gap-2 text-base"
                        />
                    </PieChart>
                </ChartContainer>
            </CardContent>
        </Card>
    );
}