import Image from "next/image";
import React, { CSSProperties } from "react";

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

export enum EButtonVariant {
	PRIMARY = "primary",
	SECONDARY = "secondary",
	GHOST = "ghost",
	LINE = "line",
}

type IProps = {
	onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
	children?: React.ReactNode;
	variant?: EButtonVariant;
	fullwidth?: boolean;
	icon?: string;
	iconstyle?: CSSProperties;
	disabled?: boolean;
	type?: "button" | "submit";
	isloading?: string;
	iconposition?: "left" | "right";
	className?: string;
};

export default function Button(props: IProps) {
	let {
		variant = EButtonVariant.PRIMARY,
		disabled = false,
		type = "button",
		isloading = "false",
		fullwidth = false,
		iconposition = "right",
		onClick,
		children,
		icon,
		iconstyle,
		className = "",
	} = props;

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

	const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr };
	delete attributes.fullwidth;
	delete attributes.icon;
	delete attributes.iconstyle;
	delete attributes.iconposition;
	return (
		<button {...attributes} onClick={onClick} className={classNames(classes["root"], className)} type={type}>
			{icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
			{children}
			{icon && iconposition === "right" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
		</button>
	);
}