import { Skeleton } from "@heroui/react";

function SkeletonRow() {
  return (
    <div className="flex items-center gap-3 px-3 py-2">
      <Skeleton className="h-12 w-12 shrink-0 rounded-lg" />
      <div className="flex flex-1 flex-col gap-2">
        <Skeleton className="h-4 w-3/5 rounded" />
        <Skeleton className="h-3 w-2/5 rounded" />
      </div>
      <Skeleton className="h-4 w-16 rounded" />
    </div>
  );
}

export function SearchLoadingState() {
  return (
    <div aria-label="Loading search results" aria-busy="true">
      <SkeletonRow />
      <SkeletonRow />
      <SkeletonRow />
    </div>
  );
}
