interface SkeletonProps {
    className?: string;
}

export function Skeleton({ className = '' }: SkeletonProps) {
    return (
        <div
            className={`bg-slate-200 dark:bg-slate-700 rounded animate-pulse ${className}`}
        />
    );
}

export function SkeletonCard() {
    return (
        <div className="bg-[var(--color-bg-elevated)] p-4 rounded-xl border border-[var(--color-border-default)]">
            <div className="flex justify-between items-start mb-3">
                <div className="space-y-2">
                    <Skeleton className="h-5 w-32" />
                    <Skeleton className="h-4 w-20" />
                </div>
                <Skeleton className="h-8 w-8 rounded-lg" />
            </div>
            <div className="flex justify-between pt-3 border-t border-slate-100 dark:border-slate-700">
                <Skeleton className="h-4 w-16" />
                <Skeleton className="h-4 w-10" />
            </div>
        </div>
    );
}

export function SkeletonTable({ rows = 5 }: { rows?: number }) {
    return (
        <div className="bg-[var(--color-bg-elevated)] rounded-xl border border-[var(--color-border-default)] overflow-hidden">
            <div className="p-4 border-b border-[var(--color-border-default)]">
                <Skeleton className="h-6 w-40" />
            </div>
            <div className="divide-y divide-slate-100 dark:divide-slate-700">
                {Array.from({ length: rows }).map((_, i) => (
                    <div key={i} className="p-4 flex items-center gap-4">
                        <Skeleton className="h-4 w-1/4" />
                        <Skeleton className="h-4 w-1/3" />
                        <Skeleton className="h-4 w-1/6" />
                        <Skeleton className="h-4 w-16 ml-auto" />
                    </div>
                ))}
            </div>
        </div>
    );
}

export function SkeletonMetricCard() {
    return (
        <div className="bg-[var(--color-bg-elevated)] p-4 rounded-xl border border-[var(--color-border-default)]">
            <Skeleton className="h-10 w-10 rounded-lg mb-3" />
            <Skeleton className="h-8 w-12 mb-1" />
            <Skeleton className="h-3 w-24" />
        </div>
    );
}

export function SkeletonList({ items = 5 }: { items?: number }) {
    return (
        <div className="space-y-3">
            {Array.from({ length: items }).map((_, i) => (
                <div key={i} className="bg-[var(--color-bg-elevated)] p-4 rounded-xl border border-[var(--color-border-default)] flex items-center gap-4">
                    <Skeleton className="h-10 w-10 rounded-full" />
                    <div className="flex-1 space-y-2">
                        <Skeleton className="h-4 w-3/4" />
                        <Skeleton className="h-3 w-1/2" />
                    </div>
                    <Skeleton className="h-8 w-8 rounded-full" />
                </div>
            ))}
        </div>
    );
}