"use client";
import React, { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import logo from "../../assets/images/logo.png";
import "../../app/globals.css";
import { useRouter } from "next/router";

function Navbar() {

  const [openNav, setOpenNav] = useState(false);
  const [selectedNav, setSelectedNav] = useState<string | null>(null);

  const navLinks = [
    { href: "/", label: "ACCUEIL" },
    { href: "#notreRestaurant", label: "NOTRE UNIVERS" },
    { href: "#menu", label: "MENU" },
    { href: "#reservation", label: "RESERVATION" },
    { href: "#contact", label: "CONTACT" },
    { href: "/Authentication/login", label: "SE CONNECTER" },
    { href: "/Authentication/signup", label: "S'INSCRIRE" },
  ];

  const router = useRouter();


  const handleNavClick = (href: string) => {
    // Close the navigation if it's open
    setOpenNav(false);

    // Check if the link is to the current page (could be adapted for other pages too)
    if (href.startsWith("#") && router.pathname === "/") {
      // Scroll to the element if we're already on the page
      const section = document.querySelector(href);
      if (section) {
        section.scrollIntoView({ behavior: "smooth" });
      }
    } else {
      // Use Next.js router to navigate to the specific page
      // This might be the homepage or a different one
      router.push(href).then(() => {
        if (href.includes("#")) {
          // Wait for the navigation to complete, then scroll to the element
          const id = href.split("#")[1];
          const section = document.querySelector(`#${id}`);
          if (section) {
            section.scrollIntoView({ behavior: "smooth" });
          }
        }
      });
    }
  };