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

export function VendorSettingsSkeleton() {
  return (
    <div aria-hidden="true" role="presentation" className="flex flex-col gap-8 p-4">
      {Array.from({ length: 3 }).map((_, s) => (
        <div
          key={s}
          className="flex flex-col gap-4 rounded-lg border border-[var(--color-border-default)] p-4"
        >
          <Skeleton className="h-6 w-1/3" />
          {Array.from({ length: 3 }).map((_, f) => (
            <div key={f} className="flex flex-col gap-1.5">
              <Skeleton variant="text" className="w-1/4" />
              <Skeleton className="h-10 w-full" />
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}