import React from 'react';
import { Globe, Bell } from 'lucide-react';
import { motion } from 'motion/react';

export const GeneralTab: React.FC = () => {
  return (
    <motion.div 
      initial={{ opacity: 0, y: 10 }} 
      animate={{ opacity: 1, y: 0 }} 
      className="space-y-12"
    >
      <div className="space-y-4">
        <h3 className="text-[10px] font-bold uppercase tracking-[0.3em] text-concrete">Paramètres généraux de l'application</h3>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Langue */}
          <div className="bg-white/40 dark:bg-white/5 border border-border rounded-xl p-8 space-y-6">
            <div className="flex items-center gap-5">
              <div className="p-3 bg-paper dark:bg-white/10 rounded-2xl text-slate border border-border">
                <Globe size={18} />
              </div>
              <div className="space-y-0.5">
                <h4 className="text-base font-bold text-ink">Langue</h4>
                <p className="text-[11px] text-concrete">Sélectionner une langue</p>
              </div>
            </div>
            
            <div className="relative group">
              <select className="w-full bg-white/50 dark:bg-black/40 border border-border rounded-xl px-5 py-3.5 text-sm outline-none focus:ring-1 ring-blueprint/20 appearance-none cursor-pointer transition-all hover:bg-white dark:hover:bg-black/60 text-ink font-medium">
                <option>Français</option>
                <option>English</option>
                <option>Español</option>
              </select>
              <div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none opacity-40 text-concrete">
                <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
            </div>
          </div>

          {/* Notifications */}
          <div className="bg-white/40 dark:bg-white/5 border border-border rounded-xl p-8 space-y-6">
            <div className="flex items-center gap-5">
              <div className="p-3 bg-paper dark:bg-white/10 rounded-2xl text-slate border border-border">
                <Bell size={18} />
              </div>
              <div className="space-y-0.5">
                <h4 className="text-base font-bold text-ink">Notifications</h4>
                <p className="text-[11px] text-concrete">Gérez vos préférences de notifications</p>
              </div>
            </div>
            
            <div className="space-y-6 divide-y divide-border/40 text-left">
              <div className="flex items-center justify-between pt-0">
                <div className="space-y-1">
                  <p className="text-xs font-bold text-ink">Notifications par email</p>
                  <p className="text-[10px] text-concrete leading-relaxed">Recevoir des notifications importantes par email</p>
                </div>
                <label className="relative inline-flex items-center cursor-pointer">
                  <input type="checkbox" className="sr-only peer" />
                  <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-slate"></div>
                </label>
              </div>
              
              <div className="flex items-center justify-between pt-6">
                <div className="space-y-1">
                  <p className="text-xs font-bold text-ink">Notifications bureau</p>
                  <p className="text-[10px] text-concrete leading-relaxed">Recevoir des notifications dans votre navigateur</p>
                </div>
                <label className="relative inline-flex items-center cursor-pointer">
                  <input type="checkbox" className="sr-only peer" defaultChecked />
                  <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-slate"></div>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </motion.div>
  );
};