import { User, Bell, Shield, CreditCard, Key } from 'lucide-react';

const tabs = [
  { id: 'profile', name: 'Perfil', icon: User },
  { id: 'notifications', name: 'Notificaciones', icon: Bell },
  { id: 'security', name: 'Seguridad', icon: Shield },
  { id: 'billing', name: 'Facturación', icon: CreditCard },
  { id: 'api', name: 'API Keys', icon: Key },
];

export default function Settings() {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-white">Configuración</h1>
        <p className="text-gray-400">Gestiona tu cuenta y preferencias</p>
      </div>

      <div className="flex gap-6">
        {/* Sidebar */}
        <div className="w-64 space-y-1">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              className="w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left
                        text-gray-400 hover:bg-gray-800 hover:text-white transition-colors"
            >
              <tab.icon className="w-5 h-5" />
              {tab.name}
            </button>
          ))}
        </div>

        {/* Content */}
        <div className="flex-1 card">
          <h2 className="text-lg font-semibold text-white mb-6">Perfil</h2>

          <form className="space-y-4 max-w-md">
            <div className="flex items-center gap-4 mb-6">
              <div className="w-20 h-20 rounded-full bg-gray-700 flex items-center justify-center">
                <User className="w-10 h-10 text-gray-400" />
              </div>
              <button type="button" className="btn btn-secondary">
                Cambiar foto
              </button>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="label">Nombre</label>
                <input type="text" className="input" defaultValue="Juan" />
              </div>
              <div>
                <label className="label">Apellido</label>
                <input type="text" className="input" defaultValue="Pérez" />
              </div>
            </div>

            <div>
              <label className="label">Email</label>
              <input type="email" className="input" defaultValue="juan@email.com" disabled />
            </div>

            <div>
              <label className="label">Zona Horaria</label>
              <select className="input">
                <option>America/Mexico_City (UTC-6)</option>
                <option>America/New_York (UTC-5)</option>
                <option>Europe/London (UTC+0)</option>
              </select>
            </div>

            <div>
              <label className="label">Idioma</label>
              <select className="input">
                <option>Español</option>
                <option>English</option>
              </select>
            </div>

            <button type="submit" className="btn btn-primary">
              Guardar Cambios
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}