import React from 'react';
import { motion } from 'motion/react';
import { User, Mail, Shield, LogOut, Camera, Bell } from 'lucide-react';

interface ProfileTabProps {
  onLogout: () => void;
}

export const ProfileTab: React.FC<ProfileTabProps> = ({ onLogout }) => {
  return (
    <motion.div 
      initial={{ opacity: 0, y: 10 }} 
      animate={{ opacity: 1, y: 0 }} 
      exit={{ opacity: 0, y: -10 }}
      className="space-y-12 max-w-2xl"
    >
      <div className="space-y-8">
        <div className="flex items-center gap-8">
          <div className="relative group">
            <div className="w-24 h-24 rounded-[32px] bg-accent/10 border-2 border-accent/20 flex items-center justify-center text-accent overflow-hidden">
               <User size={40} />
            </div>
            <button className="absolute -bottom-2 -right-2 p-2 bg-ink text-white rounded-xl shadow-lg border border-border opacity-0 group-hover:opacity-100 transition-all hover:scale-110">
              <Camera size={14} />
            </button>
          </div>
          <div className="space-y-1">
            <h3 className="text-2xl font-serif font-bold text-ink">Sepehr</h3>
            <p className="text-sm text-concrete font-light">Membre Pro depuis Mai 2024</p>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-6">
          <div className="space-y-4">
            <h4 className="text-[10px] font-bold uppercase tracking-[0.2em] text-concrete opacity-60">Informations personnelles</h4>
            <div className="space-y-3">
              <div className="p-4 bg-white/40 dark:bg-white/5 border border-border rounded-2xl flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <Mail size={18} className="text-concrete" />
                  <div>
                    <p className="text-[10px] uppercase font-bold text-concrete tracking-widest">Email</p>
                    <p className="text-sm text-ink">sepehr1151@gmail.com</p>
                  </div>
                </div>
                <button className="text-[10px] font-bold text-accent uppercase tracking-widest hover:underline">Modifier</button>
              </div>

              <div className="p-4 bg-white/40 dark:bg-white/5 border border-border rounded-2xl flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <Shield size={18} className="text-concrete" />
                  <div>
                    <p className="text-[10px] uppercase font-bold text-concrete tracking-widest">Sécurité</p>
                    <p className="text-sm text-ink">Authentification à deux facteurs</p>
                  </div>
                </div>
                <button className="text-[10px] font-bold text-accent uppercase tracking-widest hover:underline">Activer</button>
              </div>
            </div>
          </div>

          <div className="space-y-4">
            <h4 className="text-[10px] font-bold uppercase tracking-[0.2em] text-concrete opacity-60">Préférences de compte</h4>
            <div className="space-y-3">
               <div className="p-4 bg-white/40 dark:bg-white/5 border border-border rounded-2xl flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <Bell size={18} className="text-concrete" />
                  <div>
                    <p className="text-sm text-ink">Notification push</p>
                    <p className="text-[10px] text-concrete font-light pr-4">Recevez des alertes pour vos rappels et activités IA.</p>
                  </div>
                </div>
                <div className="w-10 h-5 bg-accent rounded-full relative p-1 cursor-pointer">
                  <div className="absolute right-1 top-1 w-3 h-3 bg-white rounded-full" />
                </div>
              </div>
            </div>
          </div>

          <div className="pt-8 border-t border-border/40">
            <button 
              onClick={onLogout}
              className="flex items-center gap-3 px-6 py-3 bg-rose-50 dark:bg-rose-500/10 text-rose-600 rounded-xl font-bold uppercase tracking-widest text-[10px] hover:bg-rose-100 transition-colors"
            >
              <LogOut size={16} />
              Déconnexion
            </button>
          </div>
        </div>
      </div>
    </motion.div>
  );
};