import { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from "react";

export namespace Button {
	export type Props = Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className">;
}

export const Button = forwardRef<HTMLButtonElement, Button.Props>(function Button({ children, ...props }, ref) {
	return (
		<button
			{...props}
			ref={ref}
			className="p-2 bg-stone-300 border-2 border-t-stone-200 border-l-stone-200 border-r-stone-600 border-b-stone-600 active:border-t-stone-600 active:border-l-stone-600 active:border-r-stone-200 active:border-b-stone-200 rounded focus:outline focus:outline-2 focus:outline-red-500"
		>
			{children}
		</button>
	);
});