import { Skeleton } from '@theme/components';

export const AddressListSkeleton = () => (
  <div className="flex flex-col gap-4" aria-busy="true">
    <div className="flex items-center justify-between">
      <Skeleton className="h-4 w-32" />
      <Skeleton className="h-4 w-48" />
    </div>
    <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
      {Array.from({ length: 3 }).map((_, i) => (
        <div
          key={i}
          className="rounded-sm border border-gray-300 p-3 shadow-sm"
        >
          <Skeleton className="mb-2 h-4 w-4 rounded-full" />
          <Skeleton className="mb-1.5 h-3 w-3/4" />
          <Skeleton className="mb-1.5 h-3 w-1/2" />
          <Skeleton className="h-3 w-full" />
        </div>
      ))}
    </div>
  </div>
);

export default AddressListSkeleton;