import classNames from "classnames";
import React from "react";

import classes from "./classes.module.scss";

export enum EButtonVariant {
	PRIMARY = "primary",
	SECONDARY = "secondary",
	NEUTRAL = "neutral",
	ERROR = "error",
	WARNING = "warning",
	SUCCESS = "success",
	INFO = "info",
}

export enum EButtonSize {
	LG = "lg",
	MD = "md",
	SM = "sm",
}

export enum EButtonstyletype {
	CONTAINED = "contained",
	OUTLINED = "outlined",
	TEXT = "text",
}

export type IButtonProps = {
	onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
	children?: React.ReactNode;
	variant?: EButtonVariant;
	size?: EButtonSize;
	styletype?: EButtonstyletype;
	fullwidth?: boolean;
	leftIcon?: React.ReactNode;
	rightIcon?: React.ReactNode;
	disabled?: boolean;
	isLoading?: boolean;
	type?: "button" | "submit";
	className?: string;
};

export default function Button(props: IButtonProps) {
	let {
		variant = EButtonVariant.PRIMARY,
		size = EButtonSize.LG,
		styletype = EButtonstyletype.CONTAINED,
		disabled = false,
		type = "button",
		isLoading = false,
		fullwidth = false,
		onClick,
		children,
		className = "",
		leftIcon,
		rightIcon,
	} = props;

	const fullwidthattr = fullwidth.toString();
	const isloadingattr = isLoading.toString();

	const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr, sizing: size, styletype };
	delete attributes.fullwidth;
	delete attributes.leftIcon;
	delete attributes.rightIcon;

	return (
		<button {...attributes} onClick={onClick} className={classNames(classes["root"], className)} type={type}>
			{leftIcon}
			{children}
			{rightIcon}
		</button>
	);
}