import { Phone } from 'lucide-react';

const WA_NUMBER = import.meta.env.VITE_WHATSAPP_NUMBER || 'VITE_WHATSAPP_NUMBER_MISSING';

interface EnrollmentCardProps {
    enrollment: any;
}

export function EnrollmentCard({ enrollment: e }: EnrollmentCardProps) {
    return (
        <div key={e.id} className="bg-white rounded-2xl border border-slate-100 p-6 shadow-sm">
            <div className="flex items-start justify-between mb-4">
                <div>
                    <h3 className="font-bold text-slate-800">{e.trackTitle}</h3>
                    <p className="text-sm text-slate-500 mt-1">Jour {e.currentDay} sur {e.totalDays}</p>
                </div>
                <span className={`text-xs font-medium px-2.5 py-1 rounded-full ${e.status === 'ACTIVE' ? 'bg-blue-100 text-blue-700' : e.status === 'COMPLETED' ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-600'}`}>
                    {e.status === 'ACTIVE' ? '🟢 En cours' : e.status === 'COMPLETED' ? '✅ Terminé' : e.status}
                </span>
            </div>
            {/* Progress bar */}
            <div className="w-full bg-slate-100 rounded-full h-2 mb-2">
                <div className="bg-primary h-2 rounded-full transition-all" style={{ width: `${e.progressPercent}%` }}></div>
            </div>
            <p className="text-xs text-slate-400 text-right">{e.progressPercent}% complété</p>
            {e.status === 'ACTIVE' && (
                <a href={`https://wa.me/${WA_NUMBER}?text=SUITE`} target="_blank" rel="noreferrer"
                    className="mt-4 flex items-center justify-center gap-2 bg-primary/10 text-primary font-medium text-sm py-2.5 rounded-xl hover:bg-primary/20 transition">
                    <Phone className="w-4 h-4" /> Continuer sur WhatsApp
                </a>
            )}
        </div>
    );
}