import { useState, useEffect } from "react";

import { Alert } from "@mantine/core";

import { useTranslation } from "next-i18next";

import parse from "html-react-parser";

import { isAdblocking } from "adblock-hunter";

export default function NoAdblockBanner() {
  const { t } = useTranslation("common");

  const [hasAdblock, setHasAdblock] = useState(true);

  useEffect(() => {
    isAdblocking().then((isAdblocking) => {
      setHasAdblock(isAdblocking);
    });
  }, []);

  return (
    <>
      {!hasAdblock && (
        <Alert title={t("noAdblockTitle")} color="red">
          {parse(t("noAdblockText"))}
        </Alert>
      )}
    </>
  );
}