/**
 * TaxiBook Partner - Profile View
 * ================================
 * Partner profile and stats
 */

const ProfileView = ({ partner, stats }) => {
    return (
        <div className="animate-fade-in">
            <h2 className="text-2xl font-bold text-dark-900 mb-6">Mon profil</h2>

            {/* Partner Info */}
            <div className="bg-white rounded-2xl p-6 border-2 border-dark-200 mb-6">
                <div className="flex items-center gap-4 mb-6">
                    <div className="w-16 h-16 gradient-primary rounded-xl flex items-center justify-center">
                        <i className="fas fa-building text-white text-2xl"></i>
                    </div>
                    <div>
                        <h3 className="text-xl font-bold text-dark-900">{partner?.name}</h3>
                        <p className="text-dark-500 capitalize">{partner?.type}</p>
                    </div>
                </div>

                <div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <p className="text-dark-400">Adresse</p>
                        <p className="text-dark-900 font-medium">{partner?.address}, {partner?.postal_code} {partner?.city}</p>
                    </div>
                    <div>
                        <p className="text-dark-400">Contact</p>
                        <p className="text-dark-900 font-medium">{partner?.contact_name}</p>
                    </div>
                </div>
            </div>

            {/* Stats */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="bg-white rounded-2xl p-6 text-center border-2 border-dark-200">
                    <p className="text-3xl font-bold text-dark-900">{stats?.total_bookings || 0}</p>
                    <p className="text-dark-500 text-sm">Total courses</p>
                </div>
                <div className="bg-white rounded-2xl p-6 text-center border-2 border-dark-200">
                    <p className="text-3xl font-bold text-emerald-600">{stats?.completed_bookings || 0}</p>
                    <p className="text-dark-500 text-sm">Terminées</p>
                </div>
                <div className="bg-white rounded-2xl p-6 text-center border-2 border-dark-200">
                    <p className="text-3xl font-bold text-amber-600">{stats?.pending_bookings || 0}</p>
                    <p className="text-dark-500 text-sm">En attente</p>
                </div>
                <div className="bg-white rounded-2xl p-6 text-center border-2 border-dark-200">
                    <p className="text-3xl font-bold text-primary-600">{stats?.total_spent?.toFixed(0) || 0} CHF</p>
                    <p className="text-dark-500 text-sm">Total dépensé</p>
                </div>
            </div>

            {/* Options */}
            <div className="bg-white rounded-2xl p-6 border-2 border-dark-200 mt-6">
                <h3 className="font-semibold text-dark-900 mb-4">Options activées</h3>
                <div className="space-y-3">
                    <div className="flex items-center gap-3">
                        <i className={`fas fa-check-circle ${partner?.onetouch_enabled ? 'text-emerald-500' : 'text-dark-300'}`}></i>
                        <span className={partner?.onetouch_enabled ? 'text-dark-900' : 'text-dark-400'}>
                            OneTouch (commande en un clic)
                        </span>
                    </div>
                    <div className="flex items-center gap-3">
                        <i className={`fas fa-check-circle ${partner?.can_book_packages ? 'text-emerald-500' : 'text-dark-300'}`}></i>
                        <span className={partner?.can_book_packages ? 'text-dark-900' : 'text-dark-400'}>
                            Forfaits disponibles
                        </span>
                    </div>
                </div>
            </div>
        </div>
    );
};