type SkeletonVariant = 'text' | 'card' | 'table-row'

export interface SkeletonProps {
  variant?: SkeletonVariant
  lines?: number
  className?: string
}

export function Skeleton({ variant = 'text', lines = 3, className = '' }: SkeletonProps) {
  if (variant === 'card') {
    return (
      <div className={`animate-pulse rounded-lg border border-[var(--border)] p-5 ${className}`}>
        <div className="mb-3 h-4 w-1/3 rounded bg-[var(--muted)]" />
        <div className="space-y-2">
          <div className="h-3 w-full rounded bg-[var(--muted)]" />
          <div className="h-3 w-2/3 rounded bg-[var(--muted)]" />
        </div>
      </div>
    )
  }

  if (variant === 'table-row') {
    return (
      <div className={`animate-pulse ${className}`}>
        {Array.from({ length: lines }, (_, i) => (
          <div key={i} className="flex gap-4 border-b border-[var(--border)] px-4 py-3">
            <div className="h-4 w-8 rounded bg-[var(--muted)]" />
            <div className="h-4 flex-1 rounded bg-[var(--muted)]" />
            <div className="h-4 w-20 rounded bg-[var(--muted)]" />
            <div className="h-4 w-24 rounded bg-[var(--muted)]" />
          </div>
        ))}
      </div>
    )
  }

  return (
    <div className={`animate-pulse space-y-2 ${className}`}>
      {Array.from({ length: lines }, (_, i) => (
        <div
          key={i}
          className="h-3 rounded bg-[var(--muted)]"
          style={{ width: `${Math.max(40, 100 - i * 15)}%` }}
        />
      ))}
    </div>
  )
}
