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

export type ButtonOptionTextAlignTypes = "left" | "right";
export type ButtonOptionIconAlignTypes = "left" | "right";
export type ButtonStyleTypes = "primary" | "plain";
export type ButtonOptionMode = "icon" | "text";

interface ButtonOptionProps {
    icon?: string;
    text: string;
    textAlign?: ButtonOptionTextAlignTypes;
    iconAlign?: ButtonOptionIconAlignTypes;
    buttonStyle?: ButtonStyleTypes;
    buttonMode?: ButtonOptionMode;
    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
}

export default function ButtonOption({
    icon,
    text,
    textAlign = "left",
    iconAlign = "right",
    buttonStyle = "primary",
    buttonMode = "text",
    onClick,
}: ButtonOptionProps): React.ReactElement {
    const styleClassName = classNames(
        style.buttonOption,
        buttonStyle === "primary" ? style.buttonOptionStylePrimary : style.buttonOptionStylePlain,
        textAlign === "left" ? style.buttonOptionTextLeft : style.buttonOptionTextRight,
        iconAlign === "left" ? style.buttonOptionIconLeft : style.buttonOptionIconRight
    );

    return (
        <>
            {buttonMode === "text" && (
                <a
                    className={styleClassName}
                    type="button"
                    onClick={onClick}
                    style={{ backgroundImage: `url(${icon})`, color: "var(--black)" }}
                >
                    {text}
                </a>
            )}
            {buttonMode === "icon" && (
                <a className={style.buttonOptionIconMode}>
                    <img src={icon} alt={text} />
                    <div>{text}</div>
                </a>
            )}
        </>
    );
}
