export function SkeletonProjectCard() {
  return (
    <article
      className="overflow-hidden rounded-xl border border-gray-100 bg-white shadow-sm"
      aria-hidden
    >
      <div className="aspect-video animate-pulse bg-gray-200" />
      <div className="flex items-start justify-between gap-2 p-4">
        <div className="min-w-0 flex-1 space-y-2">
          <div className="h-4 w-3/4 max-w-[180px] animate-pulse rounded bg-gray-200" />
          <div className="flex flex-wrap items-center gap-2">
            <div className="h-5 w-14 animate-pulse rounded bg-gray-200" />
            <div className="h-5 w-16 animate-pulse rounded-full bg-gray-200" />
            <div className="h-4 w-20 animate-pulse rounded bg-gray-200" />
          </div>
        </div>
        <div className="h-8 w-8 shrink-0 animate-pulse rounded-lg bg-gray-200" />
      </div>
    </article>
  );
}