'use client';

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

const chartConfig = {
    desktop: {
        label: 'Orders',
        color: '#2563EB',
    },
} satisfies ChartConfig;

interface Props {
    data?: { month: string; desktop: number }[];
}

export function SalesChannelChart({ data = [] }: Props) {
    return (
        <Card className="w-full py-3">
            <CardHeader className="flex flex-row items-center justify-between px-2 pb-4">
                <div>
                    <CardTitle className="text-lg font-bold text-foreground/80">Sales Channel</CardTitle>
                    <p className="text-xs text-foreground/70">Orders by channel</p>
                </div>
            </CardHeader>
            <CardContent className="px-0 pb-0">
                <ChartContainer config={chartConfig} className="h-[320px] w-full">
                    <BarChart
                        accessibilityLayer
                        data={data}
                        layout="vertical"
                        margin={{ right: 30, left: -10 }}
                        barCategoryGap={20}
                        barGap={8}
                    >
                        <CartesianGrid horizontal={false} strokeDasharray="3 3" />

                        <YAxis
                            dataKey="month"
                            type="category"
                            tickLine={false}
                            axisLine={false}
                            tickMargin={10}
                        />

                        <XAxis type="number" tickLine={false} axisLine={false} />

                        <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />

                        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} barSize={28}>
                            <LabelList dataKey="desktop" position="right" offset={8} fontSize={12} />
                        </Bar>
                    </BarChart>
                </ChartContainer>
            </CardContent>
        </Card>
    );
}