'use client';

/**
 * Pulsierender Platzhalter waehrend des ersten Restaurant-Ladens, in exakt
 * derselben Groesse/Form wie die echte Swipe-Karte (aspect-[3/4], rounded-2xl,
 * max-w-sm) plus Platzhalter fuer die Action-Button-Reihe darunter. Ersetzt
 * den vorherigen reinen Text "Lade Restaurants..." - fuehlt sich hochwertiger
 * an, weil sofort klar ist, WELCHE Form gleich erscheint, statt nur Text zu
 * lesen. Nutzt Tailwinds eingebautes animate-pulse statt eigener Keyframes.
 */
export function SwipeCardSkeleton() {
  return (
    <div className="flex flex-col items-center gap-5 w-full">
      <div className="relative w-full aspect-[3/4] max-w-sm mx-auto rounded-2xl overflow-hidden border border-white/10 bg-neutral-900/60 animate-pulse">
        <div className="absolute inset-0 bg-neutral-800" />
        <div className="absolute bottom-0 inset-x-0 p-4 flex flex-col gap-2">
          <div className="h-5 w-2/3 rounded-md bg-neutral-700" />
          <div className="flex gap-2">
            <div className="h-6 w-20 rounded-full bg-neutral-700" />
            <div className="h-6 w-16 rounded-full bg-neutral-700" />
          </div>
          <div className="h-3 w-1/2 rounded-md bg-neutral-700/80 mt-1" />
        </div>
      </div>

      <div className="flex gap-3.5 items-center">
        <div className="w-11 h-11 rounded-full bg-neutral-800 border-2 border-white/10 animate-pulse" />
        <div className="w-16 h-16 rounded-full bg-neutral-800 border-2 border-white/10 animate-pulse" />
        <div className="w-12 h-12 rounded-full bg-neutral-800 border-2 border-white/10 animate-pulse" />
        <div className="w-16 h-16 rounded-full bg-neutral-800 border-2 border-white/10 animate-pulse" />
        <div className="w-11 h-11 rounded-full bg-neutral-800 border-2 border-white/10 animate-pulse" />
      </div>
    </div>
  );
}