import { UnstyledButton } from "@mantine/core"
import { GearIcon } from "@phosphor-icons/react"
import { useNavigate } from "@tanstack/react-router"
import { useLingui } from "@lingui/react/macro"
import { memo } from "react";

interface SettingButtonProps {
  to: string;
  top?: number;
  right?: number;
}

const SettingsButton = ({ to }: SettingButtonProps) => {
  const navigate = useNavigate();
  const { t } = useLingui();

  return (
    <UnstyledButton
      aria-label={t`Settings`}
      style={{ cursor: 'pointer', zIndex: 1000, display: 'flex' }}
      onClick={() => navigate({ to })}
      pos='absolute'
      right={20}
      top={6}
    >
      <GearIcon weight='bold' size={20} />
    </UnstyledButton>
  );
}

export default memo(SettingsButton, (prev, next) => prev.to === next.to);
