import { cn } from '@/lib/utils';
import { ArrowDown, ArrowUp } from 'lucide-react';

interface Props {
    label: string;
    value: string | number;
    sub: string;
    icon: React.ComponentType<{ className?: string }>;
    iconColor: string;
    trend?: string;
    positive?: boolean;
}

export default function StatCard({
    label,
    value,
    sub,
    icon: Icon,
    iconColor,
    trend,
    positive,
}: Props) {
    return (
        <div className="pf-glass group flex flex-col gap-4 p-5 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-2xl">
            <div className="flex items-start justify-between">
                <div
                    className={cn(
                        'flex h-12 w-12 items-center justify-center rounded-2xl shadow-sm',
                        iconColor,
                    )}
                >
                    <Icon className="h-5 w-5" />
                </div>
                {trend && (
                    <span
                        className={cn(
                            'flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold',
                            positive
                                ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400'
                                : 'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400',
                        )}
                    >
                        {positive ? (
                            <ArrowUp className="h-3 w-3" />
                        ) : (
                            <ArrowDown className="h-3 w-3" />
                        )}
                        {trend}
                    </span>
                )}
            </div>
            <div>
                <p className="pf-mono text-foreground text-2xl font-bold tracking-tight">
                    {value}
                </p>
                <p className="text-muted-foreground mt-0.5 text-xs font-medium">
                    {label}
                </p>
            </div>
            <p className="text-muted-foreground dark:text-muted-foreground/70 text-[11px]">
                {sub}
            </p>
        </div>
    );
}