import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

export const STAT_TONES = {
    blue: { icon: "bg-blue-500 shadow-blue-200", blob: "bg-sky-100" },
    emerald: {
        icon: "bg-emerald-500 shadow-emerald-200",
        blob: "bg-emerald-100",
    },
    violet: { icon: "bg-violet-500 shadow-violet-200", blob: "bg-violet-100" },
    cyan: { icon: "bg-cyan-500 shadow-cyan-200", blob: "bg-cyan-100" },
} as const;

interface StatChipProps {
    icon: React.ElementType;
    label: string;
    value: string;
    tone: keyof typeof STAT_TONES;
}

export function StatChip({ icon: Icon, label, value, tone }: StatChipProps) {
    const palette = STAT_TONES[tone];

    return (
        <Card className="group relative h-24 min-h-0 overflow-hidden border-border/80 bg-card shadow-sm transition-shadow hover:shadow-md">
            <div
                className={cn(
                    "pointer-events-none absolute -bottom-10 -right-8 z-0 size-24 rounded-full transition-transform duration-300 group-hover:scale-125",
                    palette.blob,
                )}
            />
            <CardContent className="relative z-10 flex h-full items-center gap-3 p-4">
                <div
                    className={cn(
                        "flex size-10 shrink-0 items-center justify-center rounded-xl text-white shadow-lg",
                        palette.icon,
                    )}
                >
                    <Icon className="size-4.5" />
                </div>
                <div className="min-w-0">
                    <p className="truncate text-xs font-medium text-muted-foreground">
                        {label}
                    </p>
                    <p className="mt-0.5 truncate text-lg font-bold tracking-tight text-foreground">
                        {value}
                    </p>
                </div>
            </CardContent>
        </Card>
    );
}