import Card from '@/Components/Card';
import { CardContent, CardHeader, CardTitle } from '@/Components/ui/card';
import { ChartConfig, ChartContainer } from '@/Components/ui/chart';
import { Link } from '@inertiajs/react';
import { Bar, BarChart, XAxis } from 'recharts';

export default function BarMetricCard({
    title,
    resume,
    unit,
    href,
    data,
}: {
    title: string;
    resume: string;
    unit?: string;
    href: string;
    className?: string;
    data?: { date: string; value: number }[];
}) {
    const chartConfig: ChartConfig = {
        desktop: {
            label: 'value',
            color: '#05A7A0',
        },
    };

    return (
        <Card className="w-full transition hover:cursor-pointer hover:brightness-90">
            <Link href={href}>
                <CardHeader>
                    <CardTitle className="text-right text-black">
                        {title}
                    </CardTitle>
                </CardHeader>
                <CardContent className="relative flex justify-between gap-12 text-right align-bottom text-6xl font-light text-black">
                    <ChartContainer
                        config={chartConfig}
                        className="h-[64px] w-full"
                    >
                        <BarChart
                            accessibilityLayer
                            data={data}
                            margin={{
                                top: 4,
                                bottom: 0,
                                left: 12,
                                right: 12,
                            }}
                        >
                            <XAxis
                                className="font-semibold uppercase text-neutral-500"
                                dataKey="date"
                                tickLine={false}
                                axisLine={false}
                                tickMargin={8}
                                tick={{ fill: '#69cac6' }}
                                tickFormatter={(value) => value.slice(0, 1)}
                            />
                            <Bar
                                dataKey="value"
                                fill="var(--color-desktop)"
                                radius={4}
                                strokeWidth={2}
                            />
                        </BarChart>
                    </ChartContainer>
                    <div className="shrink-0 self-end text-right">
                        <div className="text-base font-semibold text-neutral-900">
                            {resume ? resume : ''}
                        </div>
                        <div className="text-sm font-semibold text-neutral-500">
                            {unit ? unit : ''}
                        </div>
                    </div>
                </CardContent>
            </Link>
        </Card>
    );
}