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

const Sidebar = ({
  active,
  close
}) => {
  const auth = getAuth()
  
  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 href="/my/menu" className="!text-gray_r-11 ml-auto my-auto">
                  <Cog6ToothIcon className="w-6" />
                </Link>
              </>
            ) }
          </div>
          <Link href="/" className="px-4 py-3 block !text-gray_r-12 font-normal">
            Semua Brand
          </Link>
          <Link href="/" className="px-4 py-3 block !text-gray_r-12 font-normal">
            Tentang Indoteknik
          </Link>
          <Link href="/" className="px-4 py-3 block !text-gray_r-12 font-normal">
            Pusat Bantuan
          </Link>
          <Link href="/" className="px-4 py-3 block !text-gray_r-12 font-normal">
            Kategori
          </Link>
        </div>
      </div>
    </>
  )
}

export default Sidebar