import Card from '@/components/site/card';
import { cn } from '@/lib/utils';

type StatCardProps = {
    label?: string;
    value: string;
    unit?: string;
    description?: string;
    align?: 'left' | 'center';
    className?: string;
};

export default function StatCard({
    label,
    value,
    unit,
    description,
    align = 'left',
    className,
}: StatCardProps) {
    return (
        <Card
            className={cn(
                'flex flex-col justify-between gap-3',
                align === 'center' && 'items-center text-center',
                className,
            )}
        >
            {label && (
                <span className="text-primary font-mono text-xs font-semibold tracking-wider uppercase">
                    {label}
                </span>
            )}
            <div className="flex flex-wrap items-baseline gap-x-2">
                <span className="font-display text-on-surface text-4xl font-extrabold">
                    {value}
                </span>
                {unit && (
                    <span className="font-display text-primary text-xl font-bold">
                        {unit}
                    </span>
                )}
            </div>
            {description && (
                <p className="text-on-surface-variant text-xs leading-relaxed">
                    {description}
                </p>
            )}
        </Card>
    );
}