import { CardContent, CardHeader, CardTitle } from '@/Components/ui/card';
import { Link } from '@inertiajs/react';
import { LucideIcon } from 'lucide-react';
import Card from './Card';

export default function SummaryCard({
    title,
    amount,
    className,
    href,
    icon: Icon,
    iconClassName,
}: {
    title: string;
    amount: number;
    className?: string;
    href: string;
    icon?: LucideIcon;
    iconClassName?: string;
}) {
    // New style (mockup): white card, circular icon on the left, title, big
    // number on the right. Enabled by passing an `icon`.
    if (Icon) {
        return (
            <Card
                className={`bg-white transition hover:cursor-pointer hover:shadow-md ${className ?? ''}`}
            >
                <Link href={href} className="flex items-center gap-4 p-5">
                    <span
                        className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-full ${
                            iconClassName ?? 'bg-neutral-50 text-neutral-900'
                        }`}
                    >
                        <Icon className="h-6 w-6" />
                    </span>
                    <span className="flex-1 font-medium text-neutral-900">
                        {title}
                    </span>
                    <span className="text-4xl font-light text-neutral-900">
                        {amount}
                    </span>
                </Link>
            </Card>
        );
    }

    // Legacy style (other dashboards): colored card, title on top, number below.
    return (
        <Card
            className={`flex-1 transition hover:cursor-pointer hover:brightness-90 ${className}`}
        >
            <Link href={href}>
                <CardHeader>
                    <CardTitle className="text-black">{title}</CardTitle>
                </CardHeader>
                <CardContent className="text-right text-6xl font-light text-black">
                    {amount}
                </CardContent>
            </Link>
        </Card>
    );
}