import React from "react";
import { mergeClassNames } from "@@utils/merge-class-names/merge-class-names";
import styles from "./button.scss";

export enum EButtonAppearance {
  PRIMARY,
  SECONDARY,
}

interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  appearance?: EButtonAppearance;
  text: string;
}

const getButtonApperanceClassName = (appearance?: EButtonAppearance) => {
  switch (appearance) {
    case EButtonAppearance.PRIMARY:
      return styles["button--primary"];
    case EButtonAppearance.SECONDARY:
      return styles["button--secondary"];
    default:
      return styles["button--primary"];
  }
};

export const Button = (props: IButtonProps) => (
  <button
    {...props}
    className={mergeClassNames([styles["button"], props.className, getButtonApperanceClassName(props.appearance)])}
  >
    {props.text}
  </button>
);