'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@/components/ui/chart';
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';

const chartConfig = {
    sales: {
        label: 'Sales',
        color: '#2563eb',
    },
} satisfies ChartConfig;

interface Props {
    data?: { day: string; sales: number }[];
}

const SalesStatisticChart = ({ data = [] }: Props) => {
    return (
        <Card className="w-full px-5 py-3">
            <CardHeader className="flex flex-row items-center justify-between px-0 pb-4">
                <div>
                    <CardTitle className="text-lg font-bold text-foreground/80">Sales statistic</CardTitle>
                    <p className="text-xs text-foreground/70">Daily sales for the current week</p>
                </div>
            </CardHeader>

            <CardContent className="px-0 pb-0">
                <ChartContainer config={chartConfig} className="h-[320px] w-full">
                    <AreaChart
                        data={data}
                        margin={{ top: 12, right: 12, left: 0, bottom: 8 }}
                    >
                        <defs>
                            <linearGradient id="salesGradient" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="5%"  stopColor="#2563eb" stopOpacity={0.25} />
                                <stop offset="95%" stopColor="#2563eb" stopOpacity={0.02} />
                            </linearGradient>
                        </defs>

                        <CartesianGrid vertical={false} strokeDasharray="3 3" stroke="#e5e7eb" />

                        <XAxis
                            dataKey="day"
                            tickLine={false}
                            axisLine={false}
                            tickMargin={10}
                            padding={{ left: 10, right: 10 }}
                            tick={{ fill: '#6b7280', fontSize: 13 }}
                        />

                        <YAxis
                            tickLine={false}
                            axisLine={false}
                            tickMargin={12}
                            tickCount={4}
                            tickFormatter={(v) => `${(v / 1000).toFixed(0)}k`}
                            tick={{ fill: '#6b7280', fontSize: 13 }}
                            width={45}
                        />

                        <ChartTooltip
                            cursor={false}
                            content={<ChartTooltipContent indicator="dot" formatter={(value: number) => [`${value.toLocaleString()}`, 'Sales']} />}
                        />

                        <Area dataKey="sales" type="monotone" stroke="#2563eb" strokeWidth={3.5} fill="url(#salesGradient)" />
                    </AreaChart>
                </ChartContainer>
            </CardContent>
        </Card>
    );
};

export default SalesStatisticChart;