'use client';
const SQUARES = [0, 1, 2, 3];
const DELAYS  = [0, 0.15, 0.15, 0.3];

export default function Loader({ className = "" }: { className?: string }) {
  return (
    <div className={`flex flex-col items-center justify-center gap-3 ${className}`}>
      <div className="grid grid-cols-2 gap-1">
        {SQUARES.map((i) => (
          <div
            key={i}
            className="h-3 w-3 rounded-sm bg-blue-500"
            style={{
              animation: `loaderPulse 1.2s ease-in-out ${DELAYS[i]}s infinite`,
              opacity: 0.2,
            }}
          />
        ))}
      </div>
      <span className="text-xs font-medium text-slate-400 tracking-wide">Cargando...</span>
      <style>{`
        @keyframes loaderPulse {
          0%, 100% { opacity: 0.15; transform: scale(0.85); }
          50%       { opacity: 1;    transform: scale(1);    }
        }
      `}</style>
    </div>
  );
}