/**
 * Button component to display a button with text and onClick function.
 *
 * @param {Object} props - The component props.
 * @param {string} props.text - The text to display on the button.
 * @param {Function} props.onClick - The function to run when the button is clicked.
 * @param {"submit" | "button" | "reset"} props.type - The type of button.
 * @returns {JSX.Element} The rendered Button component.
 */
function Button({
  text,
  onClick,
  type,
}: {
  text: string;
  onClick: () => void;
  type: "submit" | "button" | "reset";
}): JSX.Element {
  return (
    <button
      onClick={onClick}
      className="inline-block py-1 px-8 font-bold bg-orange-500 text-white border-2 border-black rounded-full cursor-pointer mt-5 mb-5 transition-colors duration-10 hover:bg-orange-600 hover:text-gray-300 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 4vh;"
      type={type}
    >
      {text}
    </button>
  );
}

export default Button;