"use client";

import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import styles from './Navbar.module.css';

export default function Navbar() {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <nav className={styles.navbar}>
      <div className={styles.navInner}>
        {/* Logo */}
        <Link href="/" className={styles.logo}>
          <Image
            src="/images/logo.png"
            alt="My Dosa Place logo"
            width={40}
            height={40}
            className={styles.logoLeaf}
          />
          {/* <span className={styles.logoText}>My Dosa Place</span> */}
        </Link>

        {/* Navigation Links */}
        <ul className={`${styles.navLinks} ${menuOpen ? styles.open : ''}`}>
          <li>
            <Link href="/" className={styles.navLink} onClick={() => setMenuOpen(false)}>
              Home
            </Link>
          </li>
          <li>
            <Link href="/about" className={styles.navLink} onClick={() => setMenuOpen(false)}>
              About
            </Link>
          </li>
          <li>
            <Link href="/services" className={styles.navLink} onClick={() => setMenuOpen(false)}>
              Services
            </Link>
          </li>
          <li>
            <Link href="/menu" className={styles.navLink} onClick={() => setMenuOpen(false)}>
              Menu
            </Link>
          </li>
          <li>
            <Link href="/contact" className={styles.navLink} onClick={() => setMenuOpen(false)}>
              Contact
            </Link>
          </li>
        </ul>

        <button
          type="button"
          className={`${styles.menuToggle} ${menuOpen ? styles.menuOpen : ''}`}
          onClick={() => setMenuOpen((prev) => !prev)}
          aria-label="Toggle navigation menu"
          aria-expanded={menuOpen}
        >
          <span />
          <span />
          <span />
        </button>
      </div>
    </nav>
  );
}
