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

export function CardSkeleton() {
  return (
    <li className="flex h-full flex-col gap-3.5 rounded-xl bg-zinc-100 bg-opacity-90 p-5 dark:bg-zinc-800">
      <div className="flex items-center gap-1">
        {/* Icon Skeleton */}
        <Skeleton className="mr-2 h-12 w-12 shrink-0 rounded-xl dark:bg-zinc-700" />
        
        <div className="flex flex-col gap-2">
           {/* Title Skeleton */}
          <Skeleton className="h-5 w-32 rounded-lg dark:bg-zinc-700" />
          {/* Version Skeleton */}
          <Skeleton className="h-4 w-16 rounded-lg dark:bg-zinc-700" />
        </div>
      </div>

      {/* Description Skeleton */}
      <div className="flex flex-col gap-2 grow">
        <Skeleton className="h-4 w-full rounded-lg dark:bg-zinc-700" />
        <Skeleton className="h-4 w-4/5 rounded-lg dark:bg-zinc-700" />
      </div>

      {/* Buttons Skeleton */}
      <div className="flex gap-2 mt-auto">
         <Skeleton className="h-8 w-24 rounded-lg dark:bg-zinc-700" />
         <Skeleton className="h-8 w-24 rounded-lg dark:bg-zinc-700" />
      </div>
    </li>
  );
}
