import { Link, useSearchParams } from 'react-router-dom';
import { CheckCircle2, XCircle, ArrowRight } from 'lucide-react';
import { motion } from 'framer-motion';

export default function PublishFeedback() {
  const [searchParams] = useSearchParams();
  const status = searchParams.get('status'); // Viene de Mercado Pago

  const isSuccess = status === 'approved';

  return (
    <div className="min-h-[70vh] flex items-center justify-center p-6">
      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        className="bg-white p-12 rounded-[3rem] shadow-2xl border border-slate-100 max-w-md w-full text-center"
      >
        {isSuccess ? (
          <>
            <div className="bg-emerald-50 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 text-emerald-500">
              <CheckCircle2 size={48} />
            </div>
            <h2 className="text-3xl font-black text-slate-900 uppercase tracking-tighter">¡Publicado!</h2>
            <p className="text-slate-500 mt-4 font-medium italic">
              Tu pago fue aprobado. Tu aviso ya está en proceso de revisión/publicación.
            </p>
          </>
        ) : (
          <>
            <div className="bg-rose-50 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 text-rose-500">
              <XCircle size={48} />
            </div>
            <h2 className="text-3xl font-black text-slate-900 uppercase tracking-tighter">Hubo un problema</h2>
            <p className="text-slate-500 mt-4 font-medium italic">
              No pudimos procesar el pago. Por favor, intenta de nuevo desde tu perfil.
            </p>
          </>
        )}

        <div className="mt-10 space-y-4">
          <Link
            to="/profile"
            className="w-full py-4 bg-slate-900 text-white rounded-2xl font-black uppercase text-xs tracking-widest flex items-center justify-center gap-2 hover:bg-black transition-all"
          >
            Ir a mis publicaciones <ArrowRight size={16} />
          </Link>
          <Link to="/" className="block text-[10px] font-black uppercase tracking-widest text-slate-400 hover:text-blue-600 transition-colors">
            Volver al inicio
          </Link>
        </div>
      </motion.div>
    </div>
  );
}