// @design-system: feedback/Skeleton
import { Skeleton } from './Skeleton';
import { TableSkeleton } from './TableSkeleton';

export interface AdminListPageSkeletonProps {
  showFilterBar?: boolean;
  filterRows?: number;
  searchFields?: number;
  showPagination?: boolean;
  tableCols?: number;
  tableRows?: number;
}

export function AdminListPageSkeleton({
  showFilterBar = true,
  filterRows = 1,
  searchFields = 0,
  showPagination = true,
  tableCols = 6,
  tableRows = 5,
}: AdminListPageSkeletonProps) {
  return (
    <div aria-hidden="true" role="presentation" className="flex flex-col gap-6 p-6">
      {showFilterBar ? (
        <div className="space-y-3">
          {Array.from({ length: filterRows }).map((_, rowIndex) => (
            <div key={rowIndex} className="flex flex-wrap gap-2">
              <Skeleton className="h-8 w-24 rounded-full" />
              <Skeleton className="h-8 w-28 rounded-full" />
              <Skeleton className="h-8 w-24 rounded-full" />
              <Skeleton className="h-8 w-32 rounded-full" />
            </div>
          ))}
          {searchFields > 0 ? (
            <div className="flex flex-wrap items-end gap-3">
              {Array.from({ length: searchFields }).map((_, index) => (
                <div key={index} className="flex min-w-48 flex-1 flex-col gap-1">
                  <Skeleton className="h-4 w-28" />
                  <Skeleton className="h-10 w-full rounded-md" />
                </div>
              ))}
              <Skeleton className="h-9 w-24 rounded-md" />
            </div>
          ) : null}
        </div>
      ) : null}

      <div className="border-border-default bg-surface-base rounded-xl border p-4 shadow-sm">
        <TableSkeleton rows={tableRows} cols={tableCols} />
      </div>

      {showPagination ? (
        <div className="flex justify-center pt-2">
          <Skeleton className="h-9 w-40 rounded-md" />
        </div>
      ) : null}
    </div>
  );
}