"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">
      <input
        id="my-drawer-3"
        type="checkbox"
        className="drawer-toggle "
        checked={checked}
      />
      <div className="drawer-content flex flex-col">
        {/* Navbar */}
        <div className="w-full navbar">
          <div className="flex-none lg:hidden">
            <label htmlFor="my-drawer-3">
              <Menu
                size={36}
                className="self-center w-full h-full cursor-pointer fill-black dark:fill-white"
              />
            </label>
          </div>

          <div className="flex-none hidden lg:block">
            <ul className="menu menu-horizontal items-center">
              {/* 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>
                <a href="https://climate.stripe.com/r7FSQz">Climate</a>
              </li>
              {isUserLoggedIn ? (
                <li>
                  <Link href="/account" onClick={handleClick}>
                    Account
                  </Link>
                </li>
              ) : (
                <></>
              )}
            </ul>
          </div>
        </div>
        {/* Page content here */}
      </div>
      <div className="drawer-side">
        <label htmlFor="my-drawer-3" className="drawer-overlay"></label>

        <ul className="menu w-80 h-full bg-base-200">
          {/* 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>
            <a href="https://climate.stripe.com/r7FSQz">Climate</a>
          </li>
          {isUserLoggedIn ? (
            <li>
              <Link href="/account" onClick={handleClick}>
                Account
              </Link>
            </li>
          ) : (
            <></>
          )}
        </ul>
      </div>
    </div>
  );
}

export default Navigation;
