import { Box } from "@mantine/core"
import { GearIcon } from "@phosphor-icons/react"
import { useNavigate } from "@tanstack/react-router"

interface SettingButtonProps {
  offsetY: number;
  to: string;
}

const SettingsButton = ({ offsetY, to }: SettingButtonProps) => {
  const navigate = useNavigate();

  return (
    <Box
      style={{ cursor: 'pointer', zIndex: 1000, transform: `translateY(-${offsetY}px)` }}
      onClick={() => navigate({ to })}
      pos='absolute'
      right={{ base: 0, sm: 100, md: 200, lg: 300 }}
      m={20}
    >
      <GearIcon weight='bold' size={20} />
    </Box>
  );
}

export default SettingsButton;