"use client";

export function CommercialSkeleton({
  rows = 3,
  className = "",
}: {
  rows?: number;
  className?: string;
}) {
  return (
    <div className={`animate-pulse space-y-3 ${className}`} role="status" aria-label="در حال بارگذاری">
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="h-16 rounded-2xl bg-gray-200/80 dark:bg-gray-800" />
      ))}
      <span className="sr-only">در حال بارگذاری…</span>
    </div>
  );
}

export function CommercialPageSkeleton() {
  return (
    <div className="space-y-6 p-2">
      <div className="h-8 w-48 animate-pulse rounded-lg bg-gray-200 dark:bg-gray-800" />
      <div className="h-4 w-72 animate-pulse rounded bg-gray-200 dark:bg-gray-800" />
      <CommercialSkeleton rows={4} />
    </div>
  );
}