"use client";

import { ButtonHTMLAttributes, ReactNode } from "react";
import clsx from "clsx";
import { Play, Square, Loader2 } from "lucide-react";
import styles from "@/styles/Button.module.css";

const iconMap = {
	play: Play,
	stop: Square,
	loading: Loader2,
};

function getIcon(iconName: string) {
	return iconMap[iconName as keyof typeof iconMap];
}

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 && (() => {
				const IconComponent = getIcon(iconLeft);
				return IconComponent ? <IconComponent size={16} /> : null;
			})()}
			{loading && <Loader2 size={16} className={styles.spin} />}
			<span>{children}</span>
			{iconRight && !loading && (() => {
				const IconComponent = getIcon(iconRight);
				return IconComponent ? <IconComponent size={16} /> : null;
			})()}
		</button>
	);
}