import { Trans } from "react-i18next";
import QRCode from "react-qr-code";
import CloseIcon from "../icons/CloseIcon";
import useModalStore from "../../stores/useModalStore";

function QRCodeModal() {
  const [setModal] = useModalStore((state) => [state.setModal]);

  return (
    <div className="relative lg:p-10 p-6 bg-[#131317] rounded shadow-lg w-[320px]">
      <div className="flex flex-col items-center lg:gap-8 gap-4">
        <p className="font-gilroy lg:text-xl">
          <Trans i18nKey={"scanQRCode"}>
            Отсканируйте QR-код
            <br />
            чтобы подключиться
            <br />к текущей демонстрации
          </Trans>
        </p>
        <QRCode
          bgColor="#131317"
          fgColor="#F2F2F2"
          size={128}
          value={window.location.origin + window.location.pathname}
          viewBox={`0 0 256 256`}
        />
      </div>

      <button
        onClick={() => setModal(null)}
        className="absolute top-3 right-3 p-2 rounded-full transition-colors hover:bg-white hover:bg-opacity-5"
      >
        <CloseIcon />
      </button>
    </div>
  );
}

export default QRCodeModal;
