"use client";

import { ButtonHTMLAttributes, ReactNode } from "react";
import clsx from "clsx";
import styles from "@/styles/Button.module.css";

interface ButtonProps
	extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
	variant?:
		| "primary"
		| "success"
		| "danger"
		| "warning"
		| "info"
		| "light"
		| "dark";
	iconLeft?: string;
	iconRight?: string;
	loading?: boolean;
	children: ReactNode;
	tooltip?: string;
	type?: "submit" | "reset" | "button";
}

export function Button({
	variant = "primary",
	iconLeft,
	iconRight,
	loading = false,
	children,
	className,
	disabled,
	tooltip,
	type = "button",
	...props
}: ButtonProps) {
	return (
		<button
			type={type}
			className={clsx(
				styles.button,
				styles[`is-${variant}`],
				loading && styles.isLoading,
				className,
			)}
			disabled={disabled || loading}
			title={tooltip}
			{...props}
		>
			{iconLeft && !loading && <i className={`mdi mdi-${iconLeft}`} />}
			{loading && <i className="mdi mdi-loading mdi-spin" />}
			<span>{children}</span>
			{iconRight && !loading && <i className={`mdi mdi-${iconRight}`} />}
		</button>
	);
}
