import React from "react";
import { Button } from "@mantine/core";
import { useNavigate } from "react-router";

export const NavigateButton: React.FC<{
  children: React.ReactNode;
  to: string;
}> = ({ children, to }) => {
  const navigate = useNavigate();

  const handleClick = React.useCallback(() => {
    navigate(to);
  }, [to]);

  return (
    <Button onClick={handleClick} px="md" w="auto">
      {children}
    </Button>
  );
};