import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import * as React from "react";



const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
	(
		{
			className,
			rounding = "lg",
			shape = "rectangle",
			size = "md",
			variant = "standard",
			disabled,
			ariaLabel,
			ariaDescribedBy,
			ariaControls,
			role,
			tabIndex,
			children,
			onClick,
			...buttonProps
		},
		ref
	) => {
		return (
			<button
				ref={ref}
				data-testid="mattrixwv-button"
				{...buttonProps}
				disabled={disabled}
				aria-label={ariaLabel}
				aria-describedby={ariaDescribedBy}
				aria-controls={ariaControls}
				role={role}
				tabIndex={tabIndex}
				className={clsx(
					className,
					//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
					}
				)}
			>
				{children}
			</button>
		);
	}
);

export default Button;