'use client';

import { Skeleton } from './LoadingState';

const StatCard = ({
    title,
    value,
    change,
    changeType = 'increase', // 'increase' | 'decrease'
    icon: Icon,
    color = 'text-blue-400',
    bgColor = 'bg-blue-500/10',
    loading = false,
    className = '',
    ...props
}) => {
    const deltaColor = changeType === 'increase' ? 'text-green-700' : 'text-red-700';
    const arrow = changeType === 'increase' ? '↑' : '↓';

    return (
        <div
            className={`bg-white dark:bg-[#0B0B0B] border border-neutral-200 dark:border-neutral-800/50 rounded-xl px-5 py-4 flex justify-between items-start transition-all duration-[120ms] ease-out ${className}`}
            {...props}
        >
            <div className="flex-1 min-w-0">
                <p className="text-[11px] font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-[0.04em] truncate">
                    {title}
                </p>

                <div className="text-[22px] font-semibold tracking-tight tabular-nums text-neutral-900 dark:text-white mt-[6px] truncate">
                    {loading ? (
                        <Skeleton height="h-6" width="60%" />
                    ) : (
                        value
                    )}
                </div>

                {change && !loading && (
                    <div className={`text-[11px] font-medium mt-[5px] ${deltaColor}`}>
                        {arrow} {change}
                    </div>
                )}

                {loading && change && (
                    <Skeleton height="h-3" width="40%" className="mt-[5px]" />
                )}
            </div>

            <div className={`${bgColor} ${color} w-8 h-8 rounded-md flex-shrink-0 ml-3 mt-[2px] flex items-center justify-center`}>
                {loading ? (
                    <Skeleton height="h-4" width="w-4" />
                ) : (
                    Icon && <Icon className="h-4 w-4" />
                )}
            </div>
        </div>
    );
};

export default StatCard; 