import type { LucideIcon } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { cn } from '@/lib/utils';

type StatItem = {
    label: string;
    value: string | number;
};

type StatCardProps = {
    title: string;
    icon: LucideIcon;
    mainLabel?: string;
    mainValue: string | number;
    subLabel?: string;
    description?: string;
    items?: StatItem[];
    cols?: 2 | 3 | 4;
};

export function StatCard({ title, icon: Icon, mainLabel, mainValue, subLabel, description, items = [], cols = 3 }: StatCardProps) {
    return (
        <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">{title}</CardTitle>
                <Icon className="size-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
                {mainLabel && <p className="text-xs text-muted-foreground">{mainLabel}</p>}
                <p className="text-2xl font-bold">{mainValue}</p>
                {subLabel && <p className="text-xs text-muted-foreground">{subLabel}</p>}
                {description && <p className="mt-1 text-[10px] text-muted-foreground italic">{description}</p>}
                {items.length > 0 && (
                    <div className={cn('mt-3 grid gap-2', cols === 2 && 'grid-cols-2', cols === 3 && 'grid-cols-3', cols === 4 && 'grid-cols-4')}>
                        {items.map((item, index) => (
                            <div key={index}>
                                <p className="text-xs text-muted-foreground">{item.label}</p>
                                <p className="text-sm font-medium">{item.value}</p>
                            </div>
                        ))}
                    </div>
                )}
            </CardContent>
        </Card>
    );
}