import clsx from 'clsx'

interface SkeletonProps {
  className?: string
  lines?: number
}

/**
 * 骨架屏组件
 * 用于数据加载时的占位显示，减少布局闪烁
 */
export function Skeleton({ className }: SkeletonProps) {
  return <div className={clsx('animate-pulse rounded bg-gray-200', className)} />
}

/**
 * 多行文本骨架屏
 */
export function SkeletonText({ lines = 3, className }: SkeletonProps) {
  return (
    <div className={clsx('space-y-2', className)}>
      {Array.from({ length: lines }).map((_, i) => (
        <Skeleton key={i} className={clsx('h-4', i === lines - 1 && 'w-2/3')} />
      ))}
    </div>
  )
}

/**
 * 卡片骨架屏
 */
export function SkeletonCard() {
  return (
    <div className="p-4 rounded-lg border border-gray-200 space-y-3">
      <Skeleton className="h-5 w-1/3" />
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-2/3" />
    </div>
  )
}

/**
 * 页面级骨架屏
 */
export function SkeletonPage() {
  return (
    <div className="space-y-4">
      <Skeleton className="h-8 w-48" />
      <div className="flex gap-1">
        {Array.from({ length: 4 }).map((_, i) => (
          <Skeleton key={i} className="h-8 w-20" />
        ))}
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <SkeletonCard key={i} />
        ))}
      </div>
    </div>
  )
}