import { useTranslations } from "@/hooks/translations";
import styles from "./styles.module.scss";
import { ELocalesPlacement } from "@/locales";

export interface IButtonProps {
  children?: React.ReactNode;
  classNameContainer?: string;
  disabled?: boolean;
  type?: "button" | "submit" | "reset";
  onClick?: () => void;
}

function Button({
  children,
  classNameContainer = "",
  disabled = false,
  type = "button",
  onClick,
}: IButtonProps) {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  if (!children) children = translate("/welcome.get_started");
  return (
    <div className={`${styles["button-wrapper"]} ${classNameContainer}`}>
      <button type={type} disabled={disabled} onClick={onClick}>
        <span className={styles["button-label"]}>{children}</span>
      </button>
    </div>
  );
}

export default Button;
