export function CertCardSkeleton({ count = 6 }: { count?: number }) {
  return (
    <>
      <article className="flex flex-col rounded-2xl overflow-hidden sm:p-5 p-2 bg-[#161514] border border-white/5 w-full">
        {/* Badge row */}
        <div className="flex flex-col justify-between flex-1 min-w-0 py-1 gap-4">
          <div className="space-y-2">
            <div className="flex items-center gap-2 flex-wrap">
              {/* Award badge */}
              <div className="flex items-center gap-1.5">
                <div className="w-2.5 h-2.5 rounded-sm bg-red-900/40 animate-pulse" />
                <div className="h-2.5 w-20 rounded-full bg-red-900/40 animate-pulse" />
              </div>
              {/* Category pill */}
              <div className="h-4 w-16 rounded-full border border-white/10 bg-white/5 animate-pulse" />
            </div>

            {/* Title lines */}
            <div className="space-y-1.5 pt-1">
              <div className="h-3.5 w-full rounded bg-white/8 animate-pulse" />
              <div className="h-3.5 w-3/4 rounded bg-white/8 animate-pulse" />
            </div>
          </div>
        </div>

        {/* Divider */}
        <div className="mx-4 h-px bg-white/5 sm:my-5 my-2" />

        {/* Document list */}
        <ul className="flex flex-col gap-2.5">
          {Array.from({ length: 3 }).map((_, di) => (
            <li key={di} className="flex items-start gap-2.5">
              <span className="mt-1 flex-none w-1.5 h-1.5 rounded-full bg-red-900/40 animate-pulse" />
              <div
                className="h-3 rounded bg-white/8 animate-pulse"
                style={{ width: `${75 - di * 10}%` }}
              />
            </li>
          ))}
        </ul>
      </article>
    </>
  );
}