"use client";
import classNames from "classnames";
import style from "./button.module.css";

export type ButtonWidth = "100%" | "80%" | "custom";
export type ButtonColor = "primary" | "secondary" | "plain" | "success" | "error" | "link";

interface ButtonProps {
    name?: string;
    type?: string;
    text: string;
    style?: React.CSSProperties;
    width?: ButtonWidth;
    color?: ButtonColor;
    onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
}

export default function Button(props: ButtonProps): React.ReactElement {
    const { width = "80%", color = "primary" } = props;

    const classList: classNames.ArgumentArray = [style.button];

    const getClassName = () => {
        if (color === "primary") {
            classList.push(style.buttonColorPrimary);
        } else if (color === "secondary") {
            classList.push(style.buttonColorSecondary);
        } else if (color === "plain") {
            classList.push(style.buttonColorPlain);
        } else if (color === "success") {
            classList.push(style.buttonColorSuccess);
        } else if (color === "error") {
            classList.push(style.buttonColorError);
        } else if (color === "link") {
            classList.push(style.buttonColorLink);
        }

        if (width === "100%") {
            classList.push(style.buttonWidth100);
        } else if (width === "80%") {
            classList.push(style.buttonWidth80);
        }

        return classNames(classList);
    };

    return (
        <>
            <input
                className={getClassName()}
                type="button"
                id={props.name}
                value={props.text}
                onClick={props.onClick}
                style={props.style}
            />
        </>
    );
}
