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

interface SkeletonCardProps {
    /** Card variant */
    variant?: 'default' | 'outlined' | 'elevated';
    /** Whether to show header */
    showHeader?: boolean;
    /** Whether to show footer */
    showFooter?: boolean;
    /** Content layout */
    contentLayout?: 'text' | 'text-with-image' | 'image-top' | 'custom';
    /** Number of text lines in content */
    textLines?: number;
    /** Custom className */
    className?: string;
    /** Animation type */
    animation?: 'pulse' | 'wave' | 'none';
    /** Custom content */
    children?: React.ReactNode;
}

const SkeletonCard = ({
    variant = 'default',
    showHeader = true,
    showFooter = false,
    contentLayout = 'text',
    textLines = 3,
    className,
    animation = 'pulse',
    children,
}: SkeletonCardProps) => {
    const getVariantClasses = () => {
        const variantMap = {
            default: 'bg-white dark:bg-gray-900',
            outlined: 'bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700',
            elevated: 'bg-white dark:bg-gray-900 shadow-lg',
        };
        return variantMap[variant];
    };

    const renderContent = () => {
        if (children) return children;

        switch (contentLayout) {
            case 'text':
                return (
                    <div className="space-y-3">
                        {Array.from({ length: textLines }, (_, i) => (
                            <Skeleton key={i} className={cn('h-4', i === textLines - 1 ? 'w-3/4' : 'w-full')} animation={animation} />
                        ))}
                    </div>
                );
            case 'text-with-image':
                return (
                    <div className="flex gap-4">
                        <Skeleton className="h-16 w-16 flex-shrink-0 rounded-lg" animation={animation} />
                        <div className="flex-1 space-y-2">
                            {Array.from({ length: textLines }, (_, i) => (
                                <Skeleton key={i} className={cn('h-3', i === textLines - 1 ? 'w-2/3' : 'w-full')} animation={animation} />
                            ))}
                        </div>
                    </div>
                );
            case 'image-top':
                return (
                    <div className="space-y-4">
                        <Skeleton className="h-32 w-full rounded-lg" animation={animation} />
                        <div className="space-y-2">
                            {Array.from({ length: textLines }, (_, i) => (
                                <Skeleton key={i} className={cn('h-4', i === textLines - 1 ? 'w-3/4' : 'w-full')} animation={animation} />
                            ))}
                        </div>
                    </div>
                );
            default:
                return null;
        }
    };

    return (
        <div className={cn('rounded-lg p-4', getVariantClasses(), className)}>
            {showHeader && (
                <div className="mb-4 flex items-center justify-between">
                    <Skeleton className="h-6 w-32" animation={animation} />
                    <Skeleton className="h-4 w-4 rounded-full" animation={animation} />
                </div>
            )}

            {renderContent()}

            {showFooter && (
                <div className="mt-4 flex items-center justify-between border-t border-gray-200 pt-4 dark:border-gray-700">
                    <Skeleton className="h-4 w-20" animation={animation} />
                    <Skeleton className="h-8 w-16 rounded" animation={animation} />
                </div>
            )}
        </div>
    );
};

export default SkeletonCard;