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

export default function ReviewOptimizationsLoading() {
  return (
    <div className="py-8 px-4">
      <div className="mb-8">
        <Skeleton className="h-9 w-64 mb-2" />
      </div>

      {/* Filter bar skeleton */}
      <div className="mb-6">
        <div className="flex flex-wrap items-center gap-3">
          <Skeleton className="h-10 flex-1 min-w-[200px] max-w-md rounded-md" />
          <Skeleton className="h-10 w-[180px] rounded-md" />
          <Skeleton className="h-10 w-[120px] rounded-md" />
          <Skeleton className="h-10 w-[120px] rounded-md" />
          <Skeleton className="h-10 w-[120px] rounded-md" />
          <Skeleton className="h-10 w-[140px] rounded-md" />
        </div>
      </div>

      {/* Table skeleton */}
      <div className="rounded-lg border bg-card">
        <div className="p-4 border-b">
          <div className="flex gap-4">
            <Skeleton className="h-4 w-[25%]" />
            <Skeleton className="h-4 w-[18%]" />
            <Skeleton className="h-4 w-[10%]" />
            <Skeleton className="h-4 w-[10%]" />
            <Skeleton className="h-4 w-[8%]" />
            <Skeleton className="h-4 w-[10%]" />
            <Skeleton className="h-4 w-[8%]" />
            <Skeleton className="h-4 w-[11%]" />
          </div>
        </div>
        {Array.from({ length: 5 }).map((_, i) => (
          <div key={i} className="p-4 border-b last:border-0">
            <div className="flex items-center gap-4">
              <div className="w-[25%] space-y-2">
                <Skeleton className="h-4 w-3/4" />
                <Skeleton className="h-3 w-1/2" />
              </div>
              <div className="w-[18%] flex items-center gap-2">
                <Skeleton className="h-8 w-8 rounded-full" />
                <Skeleton className="h-4 w-24" />
              </div>
              <Skeleton className="h-6 w-[10%] rounded-full" />
              <Skeleton className="h-6 w-[10%] rounded-full" />
              <Skeleton className="h-6 w-[8%] rounded-full" />
              <Skeleton className="h-6 w-[10%] rounded-full" />
              <Skeleton className="h-6 w-[8%] rounded-full" />
              <Skeleton className="h-4 w-[11%]" />
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
