import { ReactNode, MouseEventHandler } from "react";
import styles from "./button.module.css";

type ButtonVariant = "primary" | "danger" | "transparent" | "default";

interface ButtonProps {
    children: ReactNode;
    variant?: ButtonVariant;
    onClick?: MouseEventHandler<HTMLDivElement>;
    className?: string | undefined;
}

const Button = ({
                    children,
                    variant = "primary",
                    onClick,
                    className = "",
                }: ButtonProps) => {
    let btnStyle: string;

    if (variant === "primary") { // @ts-ignore
        btnStyle = styles.primary;
    }
    else if (variant === "danger") { // @ts-ignore
        btnStyle = styles.danger;
    }
    else if (variant === "transparent") { // @ts-ignore
        btnStyle = styles.transparent;
    }
    else { // @ts-ignore
        btnStyle = styles.default;
    }

    return (
        <div
            className={`${styles.btn} ${btnStyle} ${className}`}
            onClick={onClick}
        >
            {children}
        </div>
    );
};

export default Button;