import { Skeleton } from "@/shared/components/ui/skeleton"

/**
 * 审计日志表格骨架屏。
 * 用于 Suspense fallback 和 loading.tsx。
 * aria-hidden 避免屏幕阅读器朗读占位元素。
 */
export function AuditLogTableSkeleton() {
  return (
    <div className="space-y-4" aria-hidden="true" role="presentation">
      <div className="flex flex-wrap gap-3">
        <Skeleton className="h-10 w-[160px]" />
        <Skeleton className="h-10 w-[180px]" />
        <Skeleton className="h-10 w-[140px]" />
        <Skeleton className="h-10 w-[160px]" />
        <Skeleton className="h-10 w-[160px]" />
      </div>
      <div className="rounded-md border">
        <div className="space-y-0">
          <div className="flex border-b bg-muted/40 px-4 py-3">
            {Array.from({ length: 7 }).map((_, i) => (
              <Skeleton key={i} className="mx-2 h-4 flex-1" />
            ))}
          </div>
          {Array.from({ length: 8 }).map((_, row) => (
            <div key={row} className="flex border-b px-4 py-3">
              {Array.from({ length: 7 }).map((_, col) => (
                <Skeleton key={col} className="mx-2 h-4 flex-1" />
              ))}
            </div>
          ))}
        </div>
      </div>
      <div className="flex items-center justify-between">
        <Skeleton className="h-4 w-32" />
        <div className="flex gap-2">
          <Skeleton className="h-8 w-20" />
          <Skeleton className="h-8 w-20" />
        </div>
      </div>
    </div>
  )
}
