// MainMapsetCardSkeleton.tsx
import { Card, CardContent } from "@/shared/components/ui/card";

export function MainMapsetCardSkeleton() {
  return (
    <Card className="font-onest h-full w-full overflow-hidden p-0">
      <CardContent className="relative flex h-full animate-pulse flex-col p-0">
        {/* Map preview placeholder */}
        <div className="relative aspect-video w-full bg-zinc-200" />

        {/* Category badge */}
        <div className="absolute top-2 left-2 h-5 w-20 rounded-md bg-zinc-300" />

        {/* Content */}
        <div className="flex flex-1 flex-col space-y-4 p-5">
          {/* Title lines */}
          <div className="h-5 w-3/4 rounded bg-zinc-300" />
          <div className="h-5 w-2/3 rounded bg-zinc-300" />

          {/* Stats row */}
          <div className="mt-auto pt-2">
            <div className="flex w-full items-center justify-between gap-4">
              <div className="flex items-center gap-1">
                <div className="h-4 w-4 rounded bg-zinc-300" />
                <div className="h-4 w-8 rounded bg-zinc-300" />
              </div>
              <div className="flex items-center gap-1">
                <div className="h-4 w-4 rounded bg-zinc-300" />
                <div className="h-4 w-8 rounded bg-zinc-300" />
              </div>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
