"use client";

import Logo from "@/components/Logo";
import React, { useState } from "react";
import Link from "next/link";
import Icon from "@/components/Icons/Icon";

function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
  const [checked, setChecked] = useState<boolean>();
  const handleClick = () => {
    checked ? setChecked(!checked) : setChecked(checked);
  };
  return (
    <div className="drawer max-w-fit">
      <input
        id="my-drawer-3"
        type="checkbox"
        className="drawer-toggle "
        aria-label="menu-toggle"
        checked={checked}
      />
      <div className="drawer-content flex flex-col max-w-fit sm:max-w-full sm:w-full">
        {/* Navbar */}
        <div className="flex-grow navbar ">
          <div className="flex-none lg:hidden">
            <label
              htmlFor="my-drawer-3"
              aria-label="menu-icon"
              className="items-center"
            >
              <Icon name="Navigation24Filled" size="medium" />
            </label>
          </div>

          <div className="flex-none hidden lg:block">
            <ul className="menu menu-horizontal items-center text-base-content font-medium">
              {/* Site branding */}
              <div className="shrink-0 mr-4">
                {/* Logo */}
                <Link href="/">
                  <Logo className="group relative cursor-pointer" />
                </Link>
              </div>
              {/* Navbar menu content here */}
              <li>
                <Link href="/pricing" onClick={handleClick}>
                  Become A 10x Dev
                </Link>
              </li>
              <li>
                <Link href="/about">Meet Sam</Link>
              </li>

              {/* <li>
                <Link href="/contact" onClick={handleClick}>
                  Contact
                </Link>
              </li> */}
              {isUserLoggedIn ? (
                <li>
                  <Link href="/account" onClick={handleClick}>
                    Account
                  </Link>
                </li>
              ) : (
                <></>
              )}
            </ul>
          </div>
        </div>
        {/* Page content here */}
      </div>
      <div className="drawer-side z-20">
        <label
          htmlFor="my-drawer-3"
          className="drawer-overlay"
          aria-label="drawer-navigation"
        ></label>

        <ul className="menu w-80 h-full bg-base-100 text-base-content">
          {/* Sidebar content here */}
          <div className="shrink-0 m-3">
            {/* Logo */}
            <Link href="/">
              <Logo className="group relative cursor-pointer" />
            </Link>
          </div>
          <li>
            <Link href="/pricing">Get Your FastPocket</Link>
          </li>
          <li>
            <Link href="/about">Meet Sam</Link>
          </li>

          {/* <li>
            <Link href="/contact">Contact</Link>
          </li> */}
          {isUserLoggedIn ? (
            <li>
              <Link href="/account" onClick={handleClick}>
                Account
              </Link>
            </li>
          ) : (
            <></>
          )}
        </ul>
      </div>
    </div>
  );
}

export default Navigation;