import { Card, CardHeader } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";

export function DirectorySkeleton() {
  return (
    <div className="flex flex-col gap-6" aria-hidden="true">
      <div className="flex flex-col gap-2">
        <Skeleton className="h-9 w-full max-w-80" />
        <Skeleton className="h-9 w-full sm:max-w-lg" />
      </div>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {Array.from({ length: 6 }, (_, index) => (
        <Card key={index} className="h-24 flex-row gap-0 py-0 sm:h-auto sm:flex-col">
          <Skeleton className="size-24 shrink-0 rounded-none sm:aspect-square sm:size-auto" />
          <CardHeader className="min-w-0 flex-1 justify-center p-3 sm:justify-start sm:pt-5">
            <Skeleton className="h-5 w-2/3" />
            <Skeleton className="h-4 w-4/5" />
          </CardHeader>
        </Card>
      ))}
      </div>
    </div>
  );
}