"use client";

import { Skeleton } from "@heroui/react";

/**
 * Reviews section skeleton: heading + summary line + 3 review card skeletons.
 * Uses brand-aligned styling to match the polished review cards.
 */
export function ProductDetailReviewsSkeleton() {
  return (
    <div className="space-y-6">
      <Skeleton className="h-6 w-44 rounded" />
      <div className="flex flex-wrap items-center gap-2">
        <Skeleton className="h-5 w-24 rounded" />
        <Skeleton className="h-4 w-32 rounded" />
      </div>
      <ul className="m-0 list-none space-y-4 p-0">
        {[1, 2, 3].map((i) => (
          <li key={i}>
            <div className="space-y-2 rounded-lg border border-[var(--separator)] bg-[var(--surface)] p-4 md:p-5">
              <Skeleton className="h-4 w-3/4 rounded" />
              <div className="flex gap-2">
                <Skeleton className="h-4 w-20 rounded" />
                <Skeleton className="h-4 w-24 rounded" />
              </div>
              <Skeleton className="h-3 w-full rounded" />
              <Skeleton className="h-3 w-full rounded" />
              <Skeleton className="h-3 w-2/3 rounded" />
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}
