'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 TrendIcon = ({ type }) => (
        <svg className="h-3 w-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path 
                strokeLinecap="round" 
                strokeLinejoin="round" 
                strokeWidth={2} 
                d={type === 'increase' 
                    ? "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" 
                    : "M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"
                } 
            />
        </svg>
    );

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

                    <div className="text-[22px] font-semibold tracking-tight text-neutral-900 dark:text-white mb-1 truncate">
                        {loading ? (
                            <Skeleton height="h-6" width="60%" />
                        ) : (
                            value
                        )}
                    </div>
                    
                    {change && !loading && (
                        <div className="flex items-center space-x-1">
                            <div className={`flex items-center space-x-1 ${
                                changeType === 'increase' 
                                    ? 'text-green-400' 
                                    : 'text-red-400'
                            }`}>
                                <TrendIcon type={changeType} />
                                <span className="text-xs font-medium">{change}</span>
                            </div>
                        </div>
                    )}
                    
                    {loading && change && (
                        <Skeleton height="h-3" width="40%" />
                    )}
                </div>
                
                <div className={`${bgColor} ${color} w-8 h-8 p-2 rounded flex-shrink-0 ml-3 flex items-center justify-center`}>
                    {loading ? (
                        <Skeleton height="h-4" width="w-4" />
                    ) : (
                        Icon && <Icon className="h-4 w-4" />
                    )}
                </div>
            </div>
        </div>
    );
};

export default StatCard; 