import React from "react";
import styles from "./MainButton.module.scss";

type ButtonT = {
  id: string;
  type?: "outlined" | "filled";
  disabled?: boolean;
  handleClick: (e: any) => void;
  label: string;
  theme?: "light" | "dark";
  customStyles?: any;
};

const MainButton = (props: ButtonT) => {
  const {
    id,
    disabled,
    handleClick,
    label,
    type = "filled",
    theme = "light",
    customStyles,
  } = props;

  const buttonClassNameLightTheme =
    type === "filled"
      ? disabled
        ? styles.LightFilledButtonInactive
        : styles.LightFilledButton
      : disabled
      ? styles.LightOutlinedButtonInactive
      : styles.LightOutlinedButton;

  const buttonClassNameDarkTheme =
    type === "filled"
      ? disabled
        ? styles.DarkFilledButtonInactive
        : styles.DarkFilledButton
      : disabled
      ? styles.DarkOutlinedButtonInactive
      : styles.DarkOutlinedButton;

  const labelClassName =
    theme === "dark" && type === "outlined"
      ? disabled
        ? styles.DarkLabelOutlinedInactive
        : styles.DarkLabelOutlined
      : styles.LightLabel;

  return (
    <button
      style={customStyles}
      className={
        theme === "light" ? buttonClassNameLightTheme : buttonClassNameDarkTheme
      }
      data-id={id}
      disabled={disabled}
      onClick={handleClick}
    >
      <p className={labelClassName}>{label}</p>
    </button>
  );
};

export default MainButton;