'use client';


import React from 'react';
import { Check, ArrowLeft } from 'lucide-react';

interface PlanData {
  id: string;
  name: string;
  displayName: string;
  price: number;
  description: string;
  features: string[];
  isPopular: boolean;
}

interface PricingProps {
  plans: PlanData[];
  currentPlan: string;
  onBack: () => void;
  onSelectPlan: (planId: string) => void;
  isLoading?: boolean;
}

const Pricing: React.FC<PricingProps> = ({ plans, currentPlan, onBack, onSelectPlan, isLoading }) => {
  return (
    <div className="min-h-screen bg-[#eef2ff] py-20 px-8">
      <div className="max-w-6xl mx-auto">
        <button onClick={onBack} className="flex items-center gap-2 text-slate-500 hover:text-blue-600 mb-12 font-bold transition-colors">
          <ArrowLeft size={20} /> Retour
        </button>
        <div className="text-center mb-16">
          <h2 className="text-4xl font-black text-slate-900 mb-4">Choisissez votre destin d'écrivain.</h2>
          <p className="text-slate-500">Passez au plan supérieur pour libérer toute la puissance de l'IA.</p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {isLoading && <p className="text-center col-span-3 py-10">Chargement des offres...</p>}
          {!isLoading && plans.map((p) => (
            <div key={p.id} className={`bg-white rounded-3xl p-8 border transition-all ${p.isPopular ? 'border-blue-500 shadow-2xl scale-105 z-10' : 'border-indigo-100 shadow-xl'}`}>
              <div className="mb-8">
                <h4 className="text-xl font-bold text-slate-900 mb-2">{p.displayName}</h4>
                <div className="text-4xl font-black text-slate-900 mb-2">{p.price}€<span className="text-sm font-normal text-slate-400">/mois</span></div>
                <p className="text-sm text-slate-500">{p.description}</p>
              </div>
              <ul className="space-y-4 mb-10">
                {p.features.map((f, i) => (
                  <li key={i} className="flex items-center gap-3 text-sm text-slate-700">
                    <div className="text-blue-500 bg-blue-50 p-0.5 rounded-full"><Check size={14} /></div>
                    {f}
                  </li>
                ))}
              </ul>
              <button
                onClick={() => onSelectPlan(p.id)}
                className={`w-full py-4 rounded-2xl font-black transition-all ${p.id === currentPlan ? 'bg-slate-100 text-slate-400 cursor-default' : p.isPopular ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-slate-900 text-white hover:bg-slate-800'}`}
              >
                {p.id === currentPlan ? 'Plan Actuel' : 'Sélectionner'}
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Pricing;
