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

interface IFooterButtonProps {
  classNameContainer?: string;
  classNameButton?: string;
  classNameSkip?: string;
  children?: React.ReactNode;
  disabled?: boolean;
  onClick: () => void;
  onClickSkip: () => void;
}

function FooterButton({
  children,
  onClick,
  onClickSkip,
  classNameContainer = "",
  classNameButton = "",
  classNameSkip = "",
  disabled = false,
}: IFooterButtonProps) {
  const { translate } = useTranslations(ELocalesPlacement.V1);

  return (
    <div className={`${styles.container} ${classNameContainer}`}>
      <MainButton
        className={`${styles.button} ${classNameButton}`}
        disabled={disabled}
        onClick={onClick}
      >
        {children}
      </MainButton>
      <p onClick={onClickSkip} className={`${styles.skip} ${classNameSkip}`}>
        {translate("skip_this_offer")}
      </p>
    </div>
  );
}

export default FooterButton;
