import { useEffect, useState } from 'react'
import { getSesion } from '../services/auth'

/** Barra superior: marca a la izquierda, estado de sesión y acceso a configuración a la derecha */
export function Navbar() {
  const [conSesion, setConSesion] = useState(() => getSesion() !== null)

  useEffect(() => {
    const actualizar = () => setConSesion(getSesion() !== null)
    window.addEventListener('frasa:sesion', actualizar)
    window.addEventListener('storage', actualizar)
    return () => {
      window.removeEventListener('frasa:sesion', actualizar)
      window.removeEventListener('storage', actualizar)
    }
  }, [])

  return (
    <header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur">
      <div className="mx-auto flex h-14 max-w-[1280px] items-center justify-between px-6">
        <span className="text-base font-semibold tracking-tight text-[#111827]">
          FRASA<span className="text-accent">.</span>
        </span>
        <div className="flex items-center gap-4">
          <span
            className={`hidden items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium sm:inline-flex ${
              conSesion ? 'bg-green-50 text-green-700' : 'bg-[#F1F5F9] text-[#64748B]'
            }`}
          >
            <span
              aria-hidden="true"
              className={`h-1.5 w-1.5 rounded-full ${conSesion ? 'bg-green-500' : 'bg-[#94A3B8]'}`}
            />
            {conSesion ? 'Sesión activa' : 'Sin sesión'}
          </span>
          <a
            href="#configuracion"
            className="text-sm font-medium text-[#64748B] transition-colors hover:text-accent"
          >
            Configuración
          </a>
        </div>
      </div>
    </header>
  )
}