skeleton.tsx

import { cn } from '@/lib/utils'

export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}

export function Skeleton({ className, ...props }: SkeletonProps) {
    return (
        <div
            className={cn('animate-pulse rounded-md bg-muted', className)}
            {...props}
        />
    )
}

export function SkeletonText({
    lines = 3,
    className,
}: {
    lines?: number
    className?: string
}) {
    return (
        <div className={cn('space-y-2', className)}>
            {Array.from({ length: lines }).map((_, i) => (
                <Skeleton
                    key={i}
                    className={cn('h-4', i === lines - 1 ? 'w-3/4' : 'w-full')}
                />
            ))}
        </div>
    )
}

export function SkeletonCard({ className }: { className?: string }) {
    return (
        <div
            className={cn(
                'rounded-lg border border-border p-4 space-y-4',
                className
            )}
        >
            <Skeleton className="h-32 w-full" />
            <div className="space-y-2">
                <Skeleton className="h-4 w-3/4" />
                <Skeleton className="h-4 w-1/2" />
            </div>
        </div>
    )
}

export function SkeletonAvatar({ size = 'md' }: { size?: 'sm' | 'md' | 'lg' }) {
    const sizeClasses = {
        sm: 'size-8',
        md: 'size-10',
        lg: 'size-12',
    }
    return <Skeleton className={cn('rounded-full', sizeClasses[size])} />
}