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


const TertiaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
	className,
	variant = "standard",
	disabled,
	...buttonProps
}, ref) => {
	return (
		<Button
			data-testid="mattrixwv-tertiary-button"
			ref={ref}
			variant={variant}
			disabled={disabled}
			className={clsx(
				"transition duration-300",
				className,
				//Background
				{
					"bg-tertiary active:bg-tertiary-dark": (variant === "standard") && (!disabled),
					"bg-tertiary-light/80": (variant === "standard") && (disabled),
					"bg-transparent": (variant === "outline" || variant === "icon"),
					"bg-transparent hover:bg-tertiary active:bg-tertiary-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
					"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
				},
				//Outline
				{
					"border-tertiary active:border-tertiary-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
					"border-tertiary-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
				},
				//Text
				{
					"text-white": variant === "standard",
					"text-tertiary active:text-tertiary-dark": (variant === "outline" || variant === "icon") && (!disabled),
					"text-tertiary-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
					"text-tertiary hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
				}
			)}
			{...buttonProps}
		/>
	);
});

TertiaryButton.displayName = "TertiaryButton";

export default TertiaryButton;
