import { useEffect, useState } from "react";
import clsx from "clsx";

import { getCopy } from "@/config/copy";
import { useWindowSize } from "@/hooks";

import styles from "./styles.module.scss";

export const ZoomWarning = () => {
  const windowSize = useWindowSize();

  const [showWarning, setShowWarning] = useState<boolean>(false);

  useEffect(() => {
    setShowWarning(windowSize.zoom > 1.25);
  }, [windowSize, setShowWarning]);

  return (
    <div
      className={clsx(styles.zoomWrapper, {
        [styles.visible]: showWarning,
      })}
    >
      <div className={styles.content}>
        <div className={styles.icon}>
          <svg
            width="56"
            height="56"
            viewBox="0 0 56 56"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="xMidYMid slice"
          ></svg>
        </div>
        <div className={styles.text}>{getCopy("error-zoom")}</div>
      </div>
    </div>
  );
};

export default ZoomWarning;