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 { Line, LineChart } from 'recharts';

export default function EcgMetricCard({
    title,
    resume,
    unit,
    href,
    data,
}: {
    title: string;
    resume?: string | number | null;
    unit?: string | null;
    href: string;
    className?: string;
    data: Record<string, string | number>[];
}) {
    const chartConfig: ChartConfig = {
        average: {
            label: 'Media',
            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"
                    >
                        <LineChart
                            accessibilityLayer
                            data={data}
                            margin={{
                                top: 4,
                                bottom: 0,
                                left: 12,
                                right: 12,
                            }}
                        >
                            <Line
                                dataKey="average"
                                type="natural"
                                stroke="var(--color-average)"
                                strokeWidth={2}
                                dot={false}
                            />
                        </LineChart>
                    </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>
    );
}