import Link from "../Link/Link"
import greeting from "@/core/utils/greeting"
import { Cog6ToothIcon } from "@heroicons/react/24/solid"
import useAuth from "@/core/hooks/useAuth"

const Sidebar = ({
  active,
  close
}) => {
  const auth = useAuth()

  const SidebarLink = ({ children, ...props }) => (
    <Link 
      {...props} 
      onClick={close}
    >{ children }</Link>
  )

  const itemClassName = 'px-4 py-3 block !text-gray_r-12/80 font-normal'
  
  return (
    <>
      { active && <div className="overlay z-50" onClick={close}></div> }
      <div className={`fixed z-[55] top-0 h-full w-[80%] transition-all ease-linear duration-50 bg-white ${active ? 'left-0' : '-left-[80%]'}`}>
        <div className="divide-y divide-gray_r-6">
          <div className="p-4 flex gap-x-3">
            { !auth && (
              <>
                <Link href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link>
                <Link href="/login" className="btn-solid-red !text-gray_r-1 py-2 flex-1">Masuk</Link>
              </>
            ) }
            { auth && (
              <>
                <div className="text-caption-2 text-gray_r-11">
                  { greeting() },
                  <span className="text-body-2 text-gray_r-12 block mt-1 font-medium">
                    { auth?.name }
                  </span>
                </div>
                <Link 
                  onClick={close} 
                  href="/my/menu" 
                  className="!text-gray_r-11 ml-auto my-auto"
                >
                  <Cog6ToothIcon className="w-6" />
                </Link>
              </>
            ) }
          </div>
          <SidebarLink className={itemClassName} href="/">
            Semua Brand
          </SidebarLink>
          <SidebarLink className={itemClassName} href="/">
            Tentang Indoteknik
          </SidebarLink>
          <SidebarLink className={itemClassName} href="/">
            Pusat Bantuan
          </SidebarLink>
          <button className={`${itemClassName} w-full text-left`}>Kategori</button>
        </div>
      </div>
    </>
  )
}

export default Sidebar