'use client';

import { useRouter } from "next/navigation"

import {
  LogOut
} from 'lucide-react';
import Link from 'next/link';
import { useAuthStore } from "@/_stores/useAuthStore";
import LangPicker from "@/_components/LangPicker";

export default function Navbar() {
  const router = useRouter()

  const { role, logout } = useAuthStore();

  const handleLogout = async () => {
    try {
      await logout();
      router.replace("/login");
    } catch (err) {
      console.error("Login error:", err);
    }
  }

  return (
    <nav className="bg-white shadow-md sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16 items-center">
          <Link href={`/${role}/booking`} className="text-xl font-bold text-pink-500">
            IO
          </Link>

          <div className="flex space-x-6 items-center">
            <LangPicker />
            <button onClick={handleLogout} className="flex items-center gap-2 hover:text-pink-500 cursor-pointer">
              <LogOut size={20} />
            </button>
          </div>
        </div>
      </div>
    </nav>
  );
}