"use client";

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

/**
 * Attributes section skeleton: short list of skeleton rows.
 * Used as Suspense fallback if attributes are ever loaded asynchronously.
 */
export function ProductDetailAttributesSkeleton() {
  return (
    <section
      aria-label="Product details (loading)"
      className="flex flex-col gap-2 py-6 md:py-8"
    >
      {[1, 2, 3].map((i) => (
        <div
          key={i}
          className="flex flex-col gap-2 border-b border-default-200 py-2 sm:flex-row sm:items-center"
        >
          <Skeleton className="h-4 w-24 rounded" />
          <Skeleton className="h-4 w-32 rounded" />
        </div>
      ))}
    </section>
  );
}
