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



const Button = forwardRef<HTMLButtonElement, ButtonProps>((
{
	className,
	type="button",
	rounding = "lg",
	shape = "rectangle",
	size = "md",
	variant = "standard",
	disabled,
	...buttonProps
}, ref ) => {
		return (
			<button
				data-testid="mattrixwv-button"
				ref={ref}
				type={type}
				{...buttonProps}
				disabled={disabled}
				className={clsx(
					className,
					//Focus
					"focus: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
					}
				)}
			/>
		);
	}
);

export default Button;