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

interface SkeletonButtonProps {
    /** Button size */
    size?: 'sm' | 'md' | 'lg' | 'xl';
    /** Button variant */
    variant?: 'default' | 'outline' | 'ghost';
    /** Custom width */
    width?: string | number;
    /** Custom height */
    height?: string | number;
    /** Whether button has icon */
    hasIcon?: boolean;
    /** Icon position */
    iconPosition?: 'left' | 'right';
    /** Custom className */
    className?: string;
    /** Animation type */
    animation?: 'pulse' | 'wave' | 'none';
}

const SkeletonButton = ({
    size = 'md',
    variant = 'default',
    width,
    height,
    hasIcon = false,
    iconPosition = 'left',
    className,
    animation = 'pulse',
}: SkeletonButtonProps) => {
    const getSizeClasses = () => {
        const sizeMap = {
            sm: { width: 'w-20', height: 'h-8' },
            md: { width: 'w-24', height: 'h-10' },
            lg: { width: 'w-32', height: 'h-11' },
            xl: { width: 'w-36', height: 'h-12' },
        };
        return sizeMap[size];
    };

    const getVariantClasses = () => {
        const variantMap = {
            default: 'bg-gray-300 dark:bg-gray-700',
            outline: 'bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-600',
            ghost: 'bg-gray-100 dark:bg-gray-800',
        };
        return variantMap[variant];
    };

    const sizeClasses = getSizeClasses();
    const variantClasses = getVariantClasses();

    if (hasIcon) {
        return (
            <div className={cn('flex items-center gap-2', className)}>
                {iconPosition === 'left' && <Skeleton className="h-4 w-4 rounded" animation={animation} />}
                <Skeleton
                    className={cn(width || sizeClasses.width, height || sizeClasses.height, 'rounded-md', variantClasses)}
                    animation={animation}
                />
                {iconPosition === 'right' && <Skeleton className="h-4 w-4 rounded" animation={animation} />}
            </div>
        );
    }

    return (
        <Skeleton
            className={cn(width || sizeClasses.width, height || sizeClasses.height, 'rounded-md', variantClasses, className)}
            animation={animation}
        />
    );
};

export default SkeletonButton;