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

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);
  const { isSticky, ref: blurRef } = useDetectSticky<HTMLDivElement>();

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

export default FooterButton;
