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

interface SkeletonTextProps {
    /** Number of lines */
    lines?: number;
    /** Width of lines - can be array for different widths per line */
    width?: string | string[];
    /** Height of each line */
    lineHeight?: string | number;
    /** Space between lines */
    spacing?: 'tight' | 'normal' | 'loose' | string;
    /** Custom className */
    className?: string;
    /** Animation type */
    animation?: 'pulse' | 'wave' | 'none';
    /** Background variant */
    variant?: 'light' | 'medium' | 'dark';
}

const SkeletonText = ({
    lines = 1,
    width = 'w-full',
    lineHeight = 'h-4',
    spacing = 'normal',
    className,
    animation = 'pulse',
    variant = 'light',
}: SkeletonTextProps) => {
    const getSpacingClass = () => {
        const spacingMap = {
            tight: 'space-y-1',
            normal: 'space-y-2',
            loose: 'space-y-3',
        };
        return spacingMap[spacing as keyof typeof spacingMap] || spacing;
    };

    const getLineWidth = (index: number) => {
        if (Array.isArray(width)) {
            return width[index] || width[width.length - 1] || 'w-full';
        }
        return width;
    };

    if (lines === 1) {
        return <Skeleton className={cn(getLineWidth(0), lineHeight, className)} animation={animation} variant={variant} />;
    }

    return (
        <div className={cn(getSpacingClass(), className)}>
            {Array.from({ length: lines }, (_, index) => (
                <Skeleton key={index} className={cn(getLineWidth(index), lineHeight)} animation={animation} variant={variant} />
            ))}
        </div>
    );
};

export default SkeletonText;