import Checkbox from "../Checkbox";
import styles from "./styles.module.css";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

interface IPrivacyPolicyProps {
  containerClassName?: string;
  haveCheckbox?: boolean;
}

function PrivacyPolicy({ containerClassName = "", haveCheckbox = true }: IPrivacyPolicyProps) {
  const dispatch = useDispatch();
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const { checked } = useSelector(selectors.selectPrivacyPolicy);

  const handleChange = () => {
    dispatch(actions.privacyPolicy.updateChecked(!checked));
  };

  return (
    <div className={`${styles.container} ${containerClassName}`}>
      {haveCheckbox && <Checkbox checked={checked} onChange={handleChange} />}
      <p className={styles.text}>
        {translate("policy", {
          privacyPolicy: (
            <a
              href="https://witlab.us/privacy"
              target="_blank"
              rel="noopener noreferrer"
            >
              {translate("privacy_policy")}
            </a>
          ),
          termsOfUse: (
            <a
              href="https://witlab.us/terms"
              target="_blank"
              rel="noopener noreferrer"
            >
              {translate("terms_of_use")}
            </a>
          ),
        })}
      </p>
    </div>
  );
}

export default PrivacyPolicy;
