import classNames from "classnames"
import React from "react"

function BurgerMenu({
  onClick,
  blur,
}: {
  onClick?: () => void
  blur?: boolean
}) {
  return (
    <button
      className={classNames(
        "absolute top-4 left-4 flex h-16 w-16 items-center justify-center rounded-lg border-b-2 border-shield-gray bg-grayish shadow-lg duration-100 active:border-t-2 active:border-b-0 md:top-6 md:left-6 md:h-20  md:w-20 md:rounded-xl md:border-b-4 md:active:border-t-4 lg:top-8 lg:left-8 xl:top-12 xl:left-12 xl:h-24 xl:w-24",
        { "blur-sm": blur }
      )}
      onClick={() => onClick && setTimeout(onClick, 200)}
    >
      <img
        className="pixelart h-12 w-12 md:h-16 md:w-16 xl:h-20 xl:w-20"
        src="/assets/burger-menu.png"
        alt="Burger Menu"
      />
    </button>
  )
}

export default BurgerMenu
