import { UnstyledButton } from "@mantine/core"
import { ArrowLeftIcon } from "@phosphor-icons/react"
import { useRouter } from "@tanstack/react-router"
import { useLingui } from "@lingui/react/macro"

const BackButton = ({ top=20, left=20 }: { top?: number, left?: number }) => {
  const router = useRouter()
  const { t } = useLingui()

  return (
    <UnstyledButton
      aria-label={t`Go back`}
      style={{ cursor: 'pointer', zIndex: 1000, display: 'flex' }}
      onClick={() => router.history.back()}
      pos='absolute'
      left={left}
      top={`calc(${top}px + env(safe-area-inset-top, 0px))`}
    >
      <ArrowLeftIcon weight='bold' size={20} />
    </UnstyledButton>
  );
}

export default BackButton;