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

interface SkeletonProps {
  className?: string
}

export function Skeleton({ className }: SkeletonProps) {
  return (
    <div
      className={cn('animate-pulse rounded bg-[#F4F5F7]', className)}
      aria-hidden="true"
    />
  )
}

export function RepoListSkeleton() {
  return (
    <div className="flex flex-col gap-3" aria-label="Loading repositories">
      {Array.from({ length: 5 }).map((_, i) => (
        <div key={i} className="flex items-center gap-3 p-4 border border-[#DFE1E6] rounded">
          <Skeleton className="size-8 rounded-full shrink-0" />
          <div className="flex-1 flex flex-col gap-2">
            <Skeleton className="h-4 w-48" />
            <Skeleton className="h-3 w-72" />
          </div>
        </div>
      ))}
    </div>
  )
}

export function PRListSkeleton() {
  return (
    <div className="flex flex-col gap-2" aria-label="Loading pull requests">
      {Array.from({ length: 6 }).map((_, i) => (
        <div key={i} className="flex items-center gap-3 p-4 border border-[#DFE1E6] rounded">
          <Skeleton className="h-5 w-12 rounded-full shrink-0" />
          <div className="flex-1 flex flex-col gap-2">
            <Skeleton className="h-4 w-64" />
            <Skeleton className="h-3 w-40" />
          </div>
        </div>
      ))}
    </div>
  )
}

export function DiffViewerSkeleton() {
  return (
    <div className="font-mono text-sm" aria-label="Loading diff">
      {Array.from({ length: 12 }).map((_, i) => (
        <div key={i} className="flex gap-2 py-1 px-2">
          <Skeleton className="h-4 w-8 shrink-0" />
          <Skeleton className={`h-4 ${i % 3 === 0 ? 'w-full' : i % 3 === 1 ? 'w-3/4' : 'w-1/2'}`} />
        </div>
      ))}
    </div>
  )
}
