import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";



export default function Button({
	className,
	type="button",
	rounding = "lg",
	shape = "rectangle",
	size = "md",
	variant = "standard",
	disabled,
	...buttonProps
}: Readonly<ButtonProps>){
	return (
		<button
			data-testid="mattrixwv-button"
			type={type}
			disabled={disabled}
			className={clsx(
				className,
				//Focus
				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
				//Rounding
				{
					"rounded-sm": rounding === "sm",
					"rounded-md": rounding === "md",
					"rounded-lg": rounding === "lg",
					"rounded-full": rounding === "full"
				},
				//Size and shape
				{
					"p-0": size === "xs" && shape === "square",
					"p-1": size === "sm" && shape === "square",
					"p-2": size === "md" && shape === "square",
					"p-3": size === "lg" && shape === "square",
					"p-4": size === "xl" && shape === "square",

					"px-1 py-0": size === "xs" && shape === "rectangle",
					"px-2 py-1": size === "sm" && shape === "rectangle",
					"px-4 py-2": size === "md" && shape === "rectangle",
					"px-6 py-3": size === "lg" && shape === "rectangle",
					"px-8 py-4": size === "xl" && shape === "rectangle",
				},
				//Variant
				{
					"border": variant === "standard" || variant === "outline" || variant === "outline-ghost",
					"border-none": variant === "ghost" || variant === "icon"
				},
				//Disabled
				{
					"cursor-pointer": !disabled,
					"cursor-not-allowed opacity-75": disabled
				}
			)}
			{...buttonProps}
		/>
	);
}