import React, {FC} from "react";
import "./Button.scss";
import { ButtonProps } from "./Button.types";
import { Icons } from "../Icons";
import { useTheme } from "../../provider";
import { useLocale } from "../../hooks/useLocale";

export const Button: FC<ButtonProps> = ({
  children = '',
  size = "medium",
  variant = "primary",
  allCaps = false,
  isDisabled = false,
  icon = "",
  className = "",
  style = {},
  onClick,
}) => {
  
  const [theme] = useTheme()
  const label = useLocale(children)

  return (
    <button
      type="button"
      style={style}
      className={[
        "button-gtc-rc",
        `button-gtc-rc-${variant}-${theme}`,
        `button-gtc-rc-${size}`,
        `${icon && "button-gtc-rc-icon"}`,
        `${isDisabled && "button-gtc-rc-disabled"}`,
        `${className}`
      ].join(" ")}
      disabled={isDisabled}
      onClick={onClick}
    >
      <div className="button-gtc-rc-content">
        <span className={`${!icon ? "button-gtc-rc-text" : "button-gtc-rc-text-icon"}`}>
          {allCaps ? label.toUpperCase() : label}
        </span>
        {icon && <Icons name={icon} color={variant != "secondary" ? "white":"black"} size="inherit" />}
      </div>
    </button>
  );
};
