import React from 'react';

interface OrderSummaryProps {
  selectedPlan: any;
  isCustomPlan: boolean;
  isAnnual: boolean;
  setIsAnnual: (val: boolean) => void;
  subtotal: number;
  discount: number;
  totalDue: number;
}

export const OrderSummary: React.FC<OrderSummaryProps> = ({
  selectedPlan,
  isCustomPlan,
  isAnnual,
  setIsAnnual,
  subtotal,
  discount,
  totalDue
}) => {
  return (
    <div className="order-1 md:order-2 bg-slate-50 dark:bg-slate-800/30 p-6 rounded-3xl border border-slate-100 dark:border-slate-800 h-fit">
      <h3 className="text-xl font-black text-slate-900 dark:text-white mb-6 uppercase tracking-tight">Résumé de la commande</h3>
      
      <div className="border-b border-slate-200 dark:border-slate-700 pb-4 mb-4">
        <span className="text-slate-500 font-bold uppercase tracking-widest text-xs block mb-1">Pack sélectionné</span>
        <span className="text-lg font-black text-slate-900 dark:text-white">{selectedPlan.title}</span>
      </div>
      
      {!isCustomPlan && (
        <>
          <div className="flex bg-white dark:bg-slate-800/80 rounded-xl p-1 mb-6 border border-slate-200 dark:border-slate-700">
             <button type="button" onClick={() => setIsAnnual(false)} className={`flex-1 py-2 text-xs font-bold rounded-lg transition-colors ${!isAnnual ? 'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}>Mensuel</button>
             <button type="button" onClick={() => setIsAnnual(true)} className={`flex-1 py-2 text-xs font-bold rounded-lg transition-colors ${isAnnual ? 'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}>Annuel (-20%)</button>
          </div>

          <div className="flex justify-between items-center mb-3">
             <span className="text-slate-500 font-medium">Sous-total</span>
             <span className="font-bold text-slate-900 dark:text-white">{subtotal.toFixed(2)}€</span>
          </div>
          {isAnnual && (
             <div className="flex justify-between items-center text-green-600 mb-3">
               <span className="font-medium">Remise Annuelle</span>
               <span className="font-bold">-{discount.toFixed(2)}€</span>
             </div>
          )}
        </>
      )}

      <div className="pt-4 border-t border-slate-200 dark:border-slate-700 flex justify-between items-center">
        <span className="text-slate-900 dark:text-white font-black text-lg">Total à Payer</span>
        <span className="text-blue-600 font-black text-2xl">{isCustomPlan ? '0.00€' : `${totalDue.toFixed(2)}€`}</span>
      </div>
    </div>
  );
};