import { LucideIcon } from 'lucide-react';

type StatCardProps = {
    title: string;
    value: string | number;
    subtitle?: string;
    icon: LucideIcon;
    iconColor?: string;
    trend?: {
        value: number;
        label: string;
    };
};

export function StatCard({
    title,
    value,
    subtitle,
    icon: Icon,
    iconColor = 'text-blue-400',
    trend,
}: StatCardProps) {
    return (
        <div className="rounded-lg border border-slate-700 bg-slate-800 p-6 shadow-sm">
            <div className="flex items-start justify-between gap-4">
                <div className="min-w-0 flex-1">
                    <p className="text-sm font-medium text-slate-400">
                        {title}
                    </p>
                    <p
                        className="mt-2 truncate text-3xl font-bold text-white"
                        title={String(value)}
                    >
                        {value}
                    </p>
                    {subtitle && (
                        <p className="mt-1 text-xs text-slate-400">
                            {subtitle}
                        </p>
                    )}
                </div>
                <div className={`rounded-lg bg-slate-700/50 p-3 ${iconColor}`}>
                    <Icon className="h-6 w-6" />
                </div>
            </div>

            {/* Tren naik/turun jika data trend dikirim */}
            {trend && (
                <div className="mt-4 flex items-center gap-2">
                    <span className="text-xs font-medium text-slate-400">
                        {trend.label}
                    </span>
                    <span
                        className={`text-xs font-bold ${
                            trend.value >= 0 ? 'text-green-400' : 'text-red-400'
                        }`}
                    >
                        {trend.value >= 0 ? '+' : ''}
                        {trend.value}%
                    </span>
                </div>
            )}
        </div>
    );
}