'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useAuth } from '@/hooks/useAuth'
import LoginModal from './LoginModal'
import RegisterModal from './RegisterModal'

export default function Header() {
  const { user, isLoading, logout } = useAuth()
  const [showLogin, setShowLogin] = useState(false)
  const [showRegister, setShowRegister] = useState(false)

  return (
    <header className="absolute left-0 right-0 top-0 z-30 flex items-center justify-between px-4 py-3">
      <Link href="/" className="text-lg font-bold text-white">
        PhotoPlaces
      </Link>

      {showLogin && <LoginModal onClose={() => setShowLogin(false)} />}
      {showRegister && <RegisterModal onClose={() => setShowRegister(false)} />}

      <nav className="flex items-center gap-4">
        {isLoading ? null : user ? (
          <>
            <span className="text-sm text-white/60">{user.email}</span>
            <button
              onClick={logout}
              className="rounded-lg bg-white/10 px-4 py-2 text-sm text-white hover:bg-white/20 transition"
            >
              Выйти
            </button>
          </>
        ) : (
          <>
            <button
              onClick={() => setShowLogin(true)}
              className="rounded-lg bg-white/10 backdrop-blur-md px-4 py-2 text-sm text-white hover:bg-white/20 transition"
            >
              Войти
            </button>
            <button
              onClick={() => setShowRegister(true)}
              className="rounded-lg bg-green-600 px-4 py-2 text-sm text-white hover:bg-green-500 transition"
            >
              Регистрация
            </button>
          </>
        )}
      </nav>
    </header>
  )
}