import type { ButtonHTMLAttributes, FunctionComponent } from "react";
import { useTransition } from "@remix-run/react";
import clsx from "clsx";

type Props = ButtonHTMLAttributes<HTMLButtonElement>;

const Button: FunctionComponent<Props> = ({ children, ...props }) => {
	const transition = useTransition();

	return (
		<button
			className={clsx(
				"w-full flex justify-center py-2 px-4 border border-transparent text-base font-medium rounded-md text-white focus:outline-none focus:border-primary-700 focus:shadow-outline-primary transition duration-150 ease-in-out",
				{
					"bg-primary-400 cursor-not-allowed": transition.state === "submitting",
					"bg-primary-600 hover:bg-primary-700": transition.state !== "submitting",
				},
			)}
			{...props}
		>
			{children}
		</button>
	);
}

export default Button;