import clsx from "clsx";
import {ReactNode} from "react";

interface Props {
	children: ReactNode;
	color?: "orange" | "green" | "blue";
	variant?: "outline" | "solid";
	className?: string;
	disabled?: boolean;
	onClick?: () => void;
}

export default function Button({color = "green", variant = "solid", disabled = false, className, children, onClick}: Props) {
	const colorClassNames: {[key in typeof color]: {[key in typeof variant]: string}} = {
		green: {
			solid: "bg-mti-green-light text-white hover:bg-mti-green disabled:text-mti-green disabled:bg-mti-green-ultralight selection:bg-mti-green-dark",
			outline:
				"bg-transparent text-mti-green-light border border-mti-green-light hover:bg-mti-green-light disabled:text-mti-green disabled:bg-mti-green-ultralight selection:bg-mti-green-dark hover:text-white selection:text-white",
		},
		blue: {
			solid: "bg-mti-blue-light text-white hover:bg-mti-blue disabled:text-mti-blue disabled:bg-mti-blue-ultralight selection:bg-mti-blue-dark",
			outline:
				"bg-transparent text-mti-blue-light border border-mti-blue-light hover:bg-mti-blue-light disabled:text-mti-blue disabled:bg-mti-blue-ultralight selection:bg-mti-blue-dark hover:text-white selection:text-white",
		},
		orange: {
			solid: "bg-mti-orange-light text-white hover:bg-mti-orange disabled:text-mti-orange disabled:bg-mti-orange-ultralight selection:bg-mti-orange-dark",
			outline:
				"bg-transparent text-mti-orange-light border border-mti-orange-light hover:bg-mti-orange-light disabled:text-mti-orange disabled:bg-mti-orange-ultralight selection:bg-mti-orange-dark hover:text-white selection:text-white",
		},
	};

	return (
		<button
			onClick={onClick}
			className={clsx(
				"py-4 px-6 rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed",
				className,
				colorClassNames[color][variant],
			)}
			disabled={disabled}>
			{children}
		</button>
	);
}