"use client";

import Logo from "@/components/Logo";
import React, { useState } from "react";
import { Menu } from "@styled-icons/entypo/Menu";
import Link from "next/link";

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 "
        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">
              <Menu
                size={36}
                className="self-center flex-grow h-full cursor-pointer fill-primary"
              />
            </label>
          </div>

          <div className="flex-none hidden lg:block">
            <ul className="menu menu-horizontal items-center text-base-content">
              {/* Site branding */}
              <div className="shrink-0 mr-4">
                {/* Logo */}
                <Logo className="group relative cursor-pointer" />
              </div>
              {/* Navbar menu content here */}
              <li>
                <Link href="/pricing" onClick={handleClick}>
                  Pricing
                </Link>
              </li>
              <li>
                <Link href="/blogs" onClick={handleClick}>
                  Blogs
                </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"></label>

        <ul className="menu w-80 h-full bg-base-100 text-base-content">
          {/* Sidebar content here */}
          <div className="shrink-0 m-3">
            {/* Logo */}
            <Logo className="group relative cursor-pointer" />
          </div>
          <li>
            <Link href="/pricing">Pricing</Link>
          </li>
          <li>
            <Link href="/blogs">Blogs</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;
