import { MenuOutlined } from "@ant-design/icons";
import styles from "./Navbar.module.css";
import { Constants } from "../../Utils";
import { useState } from "react";
import Drawer from "./Drawer";

export default function Navbar() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);

  console.log(isDrawerOpen);

  return (
    <>
      <div className={styles.navbar}>
        <img src="/logo.png" alt="Logo" className={styles.logo} />

        <div className={styles.rightItems}>
          <div className={styles.navbarLinks}>
            <a href={Constants.ROUTE_PATHS.HOME}>Startseite</a>
            <a href="/about">Öffnungszeiten</a>
            <a href="/services">Anfahrt</a>
            <a href="/contact">Portfolio</a>
          </div>

          <button className={styles.button}>Termin buchen</button>

          <MenuOutlined
            onClick={() => setIsDrawerOpen(true)}
            className={styles.menuIcon}
            style={{ color: "#fff" }}
          />
        </div>
      </div>

      <Drawer
        isOpen={isDrawerOpen}
        closeDrawer={() => setIsDrawerOpen(false)}
      />
    </>
  );
}