import React from 'react';

interface SkeletonProps {
    className?: string;
    variant?: 'circle' | 'rect' | 'text';
    width?: string | number;
    height?: string | number;
}

export function Skeleton({ 
    className = '', 
    variant = 'rect', 
    width, 
    height 
}: SkeletonProps) {
    const baseClasses = "anim-shimmer rounded";
    
    const variantClasses = {
        circle: "rounded-full",
        rect: "rounded-lg",
        text: "rounded h-4 w-full"
    };

    const style: React.CSSProperties = {
        width: typeof width === 'number' ? `${width}px` : width,
        height: typeof height === 'number' ? `${height}px` : height,
    };

    return (
        <div 
            className={`${baseClasses} ${variantClasses[variant]} ${className}`}
            style={style}
        />
    );
}