import { cn } from '@/lib/utils';
import Skeleton from './Skeleton';

interface SkeletonStatsProps {
    /** Number of stat cards */
    count?: number;
    /** Layout type */
    layout?: 'horizontal' | 'vertical' | 'grid';
    /** Grid columns (when layout is 'grid') */
    gridCols?: 2 | 3 | 4 | 5 | 6;
    /** Whether to show icons */
    showIcon?: boolean;
    /** Whether to show trend indicators */
    showTrend?: boolean;
    /** Custom className */
    className?: string;
    /** Animation type */
    animation?: 'pulse' | 'wave' | 'none';
}

const SkeletonStats = ({
    count = 4,
    layout = 'grid',
    gridCols = 4,
    showIcon = true,
    showTrend = false,
    className,
    animation = 'pulse',
}: SkeletonStatsProps) => {
    const getLayoutClasses = () => {
        if (layout === 'horizontal') return 'flex flex-wrap gap-4';
        if (layout === 'vertical') return 'space-y-4';
        return `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-${gridCols} gap-4`;
    };

    const StatCard = ({ index }: { index: number }) => (
        <div className="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
            <div className="flex items-start justify-between">
                <div className="flex-1 space-y-2">
                    <div className="flex flex-col gap-1">
                        <Skeleton className="h-4 w-20" animation={animation} />
                        <Skeleton className="my-5 size-8" animation={animation} />
                    </div>
                    {showTrend && (
                        <div className="flex items-center gap-1">
                            <Skeleton className="h-3 w-3 rounded-full" animation={animation} />
                            <Skeleton className="h-3 w-12" animation={animation} />
                        </div>
                    )}
                </div>
                {showIcon && <Skeleton className="my-auto h-10 w-10 flex-shrink-0 rounded-lg" animation={animation} variant="medium" />}
            </div>
        </div>
    );

    return (
        <div className={cn(getLayoutClasses(), className)}>
            {Array.from({ length: count }, (_, index) => (
                <StatCard key={index} index={index} />
            ))}
        </div>
    );
};

export default SkeletonStats;