import clsx from "clsx";
import Button, { ButtonProps } from "./Button";


export default function DangerButton(props: ButtonProps){
	const {
		variant = "solid",
		disabled
	} = props;


	return (
		<Button
			{...props}
			className={clsx(
				props.className,
				//Background
				{
					"bg-transparent": variant === "outline" || variant === "icon",
					"bg-red-600 hover:bg-red-700 active:bg-red-800": (variant === "solid") && (!disabled),
					"bg-red-400/80": (variant === "solid") && (disabled),
					"bg-transparent hover:bg-red-600 active:bg-red-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
					"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
				},
				//Text
				{
					"text-white": variant === "solid",
					"text-red-600 hover:text-red-700 active:text-red-800": (variant === "outline" || variant === "icon") && (!disabled),
					"text-red-400/80": (variant === "outline" || variant === "icon") && (disabled),
					"text-red-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
					"text-red-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
				},
				//Outline
				{
					"outline-none": variant === "ghost" || variant === "icon",
					"outline outline-red-600 hover:outline-red-700 active:outline-red-800": (variant === "solid" || variant === "outline") && (!disabled),
					"outline outline-red-400/80": (variant === "solid" || variant === "outline") && (disabled),
					"outline hover:outline-red-600 active:outline-red-700": (variant === "outline-ghost") && (!disabled),
					"outline outline-red-400/80 ": (variant === "outline-ghost") && (disabled)
				}
			)}
		>
			{props.children}
		</Button>
	);
}
