import { cn } from "@/src/lib/utils"

interface StatCardProps {
    title: string
    value: string
    icon: React.ReactNode
    highlighted?: boolean
    className?: string
}

export default function StatCard({ title, value, icon, highlighted, className }: StatCardProps) {
    return (
        <div
            className={cn(
                "relative flex flex-col gap-6 rounded-2xl p-4",
                highlighted ? "bg-primary text-white" : "bg-white border border-border",
                className,
            )}
        >
            <div className={cn(
                "flex size-9 items-center justify-center rounded-xl",
                highlighted ? "bg-white/20" : "bg-primary/10",
            )}>
                <span className={highlighted ? "text-white" : "text-primary"}>{icon}</span>
            </div>
            <div className="flex flex-col">
                <p className={cn("text-2xl font-bold", highlighted ? "text-white" : "text-foreground")}>
                    {value}
                </p>
                <p className={cn("text-sm mt-0.5", highlighted ? "text-white/80" : "text-muted-foreground")}>
                    {title}
                </p>
            </div>
        </div>
    )
}