import { cn } from '@/lib/utils';
import { ReactNode } from 'react';

interface SkeletonProps {
    /** Custom className for styling */
    className?: string;
    /** Width of the skeleton - can be string (like 'w-full', '100px') or number (converted to px) */
    width?: string | number;
    /** Height of the skeleton - can be string (like 'h-4', '40px') or number (converted to px) */
    height?: string | number;
    /** Border radius - can be 'none', 'sm', 'md', 'lg', 'xl', '2xl', 'full' or custom string */
    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string;
    /** Animation type */
    animation?: 'pulse' | 'wave' | 'none';
    /** Animation duration in milliseconds */
    duration?: number;
    /** Background color variant */
    variant?: 'light' | 'medium' | 'dark' | 'custom';
    /** Custom background color (when variant is 'custom') */
    bgColor?: string;
    /** Whether to show shimmer effect */
    shimmer?: boolean;
    /** Children to render instead of empty skeleton */
    children?: ReactNode;
}

const Skeleton = ({
    className,
    width,
    height,
    radius = 'md',
    animation = 'pulse',
    duration = 2000,
    variant = 'light',
    bgColor,
    shimmer = false,
    children,
    ...props
}: SkeletonProps) => {
    // Convert numeric values to px
    const getSize = (size: string | number | undefined) => {
        if (typeof size === 'number') return `${size}px`;
        return size;
    };

    // Get radius classes
    const getRadiusClass = () => {
        const radiusMap = {
            none: 'rounded-none',
            sm: 'rounded-sm',
            md: 'rounded',
            lg: 'rounded-lg',
            xl: 'rounded-xl',
            '2xl': 'rounded-2xl',
            full: 'rounded-full',
        };
        return radiusMap[radius as keyof typeof radiusMap] || radius;
    };

    // Get background color classes
    const getBgClass = () => {
        if (variant === 'custom' && bgColor) return '';

        const bgMap = {
            light: 'bg-gray-200 dark:bg-gray-800',
            medium: 'bg-gray-300 dark:bg-gray-700',
            dark: 'bg-gray-400 dark:bg-gray-600',
            custom: bgColor || 'bg-gray-200 dark:bg-gray-800',
        };
        return bgMap[variant];
    };

    // Get animation classes
    const getAnimationClass = () => {
        const animationMap = {
            pulse: 'animate-pulse',
            wave: 'animate-wave',
            none: '',
        };
        return animationMap[animation];
    };

    // Create shimmer effect
    const shimmerClass = shimmer
        ? 'relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent'
        : '';

    const style: React.CSSProperties = {
        width: getSize(width),
        height: getSize(height),
        animationDuration: `${duration}ms`,
        backgroundColor: variant === 'custom' ? bgColor : undefined,
    };

    return (
        <div className={cn('inline-block', getBgClass(), getRadiusClass(), getAnimationClass(), shimmerClass, className)} style={style} {...props}>
            {children}
        </div>
    );
};

export default Skeleton;