export function Skeleton({
  className = "",
}: {
  className?: string;
}) {
  return (
    <div
      className={`animate-pulse rounded-md bg-slate-200/80 ${className}`}
      aria-hidden
    />
  );
}

export function DataTableSkeletonRows({
  columns,
  rows = 8,
}: {
  columns: number;
  rows?: number;
}) {
  return (
    <>
      {Array.from({ length: rows }).map((_, rowIndex) => (
        <tr key={rowIndex} className="hover:bg-transparent">
          {Array.from({ length: columns }).map((_, colIndex) => (
            <td key={colIndex} className="px-3 py-3">
              <Skeleton
                className={`h-3.5 ${
                  colIndex === 0 ? "w-8" : colIndex === columns - 1 ? "w-16" : "w-full max-w-[9rem]"
                }`}
              />
            </td>
          ))}
        </tr>
      ))}
    </>
  );
}

export function PageContentSkeleton({
  rows = 4,
}: {
  rows?: number;
}) {
  return (
    <div className="space-y-4" aria-busy="true" aria-label="در حال بارگذاری">
      <div className="rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card">
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <div key={i} className="space-y-2">
              <Skeleton className="h-3 w-16" />
              <Skeleton className="h-10 w-full" />
            </div>
          ))}
        </div>
      </div>
      <div className="overflow-hidden rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card">
        <div className="space-y-3">
          {Array.from({ length: rows }).map((_, i) => (
            <Skeleton key={i} className="h-10 w-full" />
          ))}
        </div>
      </div>
    </div>
  );
}

export function CardListSkeleton({
  rows = 6,
  className = "",
}: {
  rows?: number;
  className?: string;
}) {
  return (
    <div className={`space-y-2 ${className}`} aria-busy="true" aria-label="در حال بارگذاری">
      {Array.from({ length: rows }).map((_, i) => (
        <div
          key={i}
          className="rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card"
        >
          <Skeleton className="mb-2 h-4 w-1/3 max-w-[12rem]" />
          <Skeleton className="h-3 w-2/3 max-w-[18rem]" />
        </div>
      ))}
    </div>
  );
}