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 SpirometryMetricCard({
    title,
    resume,
    unit,
    href,
    data,
}: {
    title: string;
    resume: string;
    unit?: string;
    href: string;
    data: { x: number; y: number }[];
}) {
    const chartConfig: ChartConfig = {
        y: {
            label: 'Flusso',
            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
                            data={data}
                            margin={{ top: 4, bottom: 0, left: 12, right: 12 }}
                        >
                            <Line
                                dataKey="y"
                                type="monotone"
                                stroke="var(--color-y)"
                                strokeWidth={2}
                                dot={false}
                                isAnimationActive={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>
    );
}