import { useAuth } from '../context/AuthContext';
import ConfigPanel from '../components/ConfigPanel';
import { Link } from 'react-router-dom';

export default function SeguridadPage() {
  const { user, loading } = useAuth();

  if (loading) return null;

  if (!user) {
    return (
      <div className="container mx-auto px-6 py-24 text-center">
        <h2 className="text-3xl font-bold text-white">Acceso Denegado</h2>
        <Link to="/" className="text-blue-400 mt-4 block">Volver al inicio</Link>
      </div>
    );
  }

  return (
    <div className="container mx-auto px-6 py-12 max-w-4xl animate-fade-in-up">
      <div className="mb-12">
        <h1 className="text-5xl font-black tracking-tighter uppercase mb-2">Seguridad de <span className="text-blue-500">Cuenta</span></h1>
        <p className="text-gray-500 font-bold tracking-widest uppercase text-xs">Gestiona tu contraseña y autenticación de dos factores</p>
      </div>

      <ConfigPanel user={user} />
    </div>
  );
}