frontend/src/components/ui/LoadingScreen.tsx

import { Image } from "lucide-react";

export default function LoadingScreen() {
  return (
    <div className="fixed inset-0 flex flex-col items-center justify-center bg-zinc-400 z-50">
      <div className="relative flex flex-col items-center">
        <div className="relative mb-8 animate-pulse">
          <div className="text-white">
            <Image size={110} strokeWidth={1.2} className="drop-shadow-sm" />
          </div>
          <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-14 h-1.5 bg-yellow-400 rounded-full shadow-md" />
        </div>

        <div className="text-center">
          <p className="text-white text-xl font-light tracking-widest uppercase opacity-90 animate-pulse">
            Encontrar los mejores productos
          </p>
          <div className="mt-8 flex gap-2 justify-center">
            <div className="w-2 h-2 bg-white rounded-full animate-bounce [animation-delay:-0.3s]" />
            <div className="w-2 h-2 bg-white rounded-full animate-bounce [animation-delay:-0.15s]" />
            <div className="w-2 h-2 bg-white rounded-full animate-bounce" />
          </div>
        </div>
      </div>

      <div className="absolute bottom-10 opacity-30">
        <p className="text-white text-xs tracking-tighter uppercase font-bold">
          Cargando Catálogo v2.0
        </p>
      </div>
    </div>
  );
}