import React, { useState } from 'react';
import { CreditCard, Shield, Lock, ArrowRight, Loader2 } from 'lucide-react';

interface CheckoutProps {
  onComplete: () => void;
  onCancel: () => void;
}

const Checkout: React.FC<CheckoutProps> = ({ onComplete, onCancel }) => {
  const [loading, setLoading] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setTimeout(() => {
        onComplete();
    }, 2000);
  };

  return (
    <div className="min-h-screen bg-[#eef2ff] flex items-center justify-center p-8">
      <div className="bg-white rounded-3xl shadow-2xl flex flex-col md:flex-row max-w-4xl w-full overflow-hidden animate-in fade-in slide-in-from-bottom-10 duration-500">
        <div className="w-full md:w-1/3 bg-slate-900 text-white p-8">
            <h3 className="text-xl font-bold mb-8 flex items-center gap-2"><Lock size={18} className="text-blue-400" /> Commande</h3>
            <div className="space-y-4">
                <div className="flex justify-between text-sm"><span>Auteur Pro</span><span>12.00€</span></div>
                <div className="flex justify-between text-sm"><span>TVA (20%)</span><span>2.40€</span></div>
                <div className="h-px bg-slate-800 my-4" />
                <div className="flex justify-between text-xl font-black"><span>Total</span><span className="text-blue-400">14.40€</span></div>
            </div>
        </div>
        <div className="flex-1 p-8 md:p-12">
            <h2 className="text-2xl font-black text-slate-900 mb-8 text-center">Paiement Sécurisé</h2>
            <form onSubmit={handleSubmit} className="space-y-6">
                <div>
                    <label className="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Numéro de carte</label>
                    <div className="relative">
                        <input type="text" placeholder="4242 4242 4242 4242" className="w-full bg-[#eef2ff] border border-indigo-100 p-4 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 font-bold" />
                        <CreditCard className="absolute right-4 top-4 text-slate-400" />
                    </div>
                </div>
                <div className="grid grid-cols-2 gap-6">
                    <input type="text" placeholder="MM / YY" className="w-full bg-[#eef2ff] border border-indigo-100 p-4 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 font-bold" />
                    <input type="text" placeholder="CVC" className="w-full bg-[#eef2ff] border border-indigo-100 p-4 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 font-bold" />
                </div>
                <button 
                    disabled={loading}
                    className="w-full bg-blue-600 text-white py-5 rounded-2xl font-black text-lg hover:bg-blue-700 transition-all shadow-xl shadow-blue-200 flex items-center justify-center gap-3"
                >
                    {loading ? <Loader2 className="animate-spin" /> : <>Confirmer le paiement <ArrowRight size={20} /></>}
                </button>
                <div className="flex items-center justify-center gap-2 text-[10px] text-slate-400 font-bold uppercase">
                    <Shield size={12} /> Traitement chiffré SSL 256-bits
                </div>
            </form>
        </div>
      </div>
    </div>
  );
};

export default Checkout;