import { Moon, Sun } from 'lucide-react'
import { useTheme } from '../../context/ThemeProvider'
import { Logo } from '../brand'
import { Breadcrumb } from './Breadcrumb'
import { UserMenu } from './UserMenu'

function ThemeToggle() {
  const { isDark, setTheme } = useTheme()

  return (
    <button
      type="button"
      onClick={() => setTheme(isDark ? 'light' : 'dark')}
      aria-label={isDark ? 'Cambiar a tema claro' : 'Cambiar a tema oscuro'}
      className="flex size-9 items-center justify-center rounded-full border border-border text-foreground/70 transition-colors hover:bg-primary-soft hover:text-primary"
    >
      {isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
    </button>
  )
}

export function Header() {
  return (
    <header className="sticky top-0 z-40 h-16 w-full border-b border-border bg-background/90 backdrop-blur">
      <div className="mx-auto flex h-full w-full max-w-7xl items-center justify-between px-4 lg:px-6">
        <div className="flex min-w-0 items-center">
          <a href="/" className="flex items-center lg:hidden" aria-label="Gruperly inicio">
            <Logo className="h-8" />
          </a>
          <Breadcrumb />
        </div>
        <div className="flex items-center gap-2">
          <ThemeToggle />
          <UserMenu />
        </div>
      </div>
    </header>
  )
}