import PopupWrapper from "../PopupWrapper";
import Button from "../ui/Button";
import ChevronLeftIcon from "../icons/ChevronLeftIcon";
import usePopupStore from "../../store/popupStore";
import SharePopup from "./SharePopup";
import QRCode from "react-qr-code";

interface QRCodePopupProps {
  link: string;
}

function QRCodePopup({ link }: QRCodePopupProps) {
  const { setPopup } = usePopupStore();

  return (
    <PopupWrapper
      draggable
      leftButton={
        <Button
          variant="secondary"
          size="small"
          onClick={() => setPopup(<SharePopup link={link} />)}
        >
          <div className="2xl:size-[1.111vw] size-4">
            <ChevronLeftIcon />
          </div>
        </Button>
      }
    >
      <div className="flex flex-col 2xl:gap-y-[1.667vw] gap-y-6 items-center">
        <QRCode value={link} className="2xl:size-[10.556vw] size-[152px]" />
        <div className="2xl:space-y-[0.556vw] space-y-2">
          <p className="title-m font-medium">Подключайтесь к сеансу</p>
          <p className="caption-s font-medium text-center text-[#CCCCCC]">
            Можно даже с мобильным интернетом
          </p>
        </div>
      </div>
    </PopupWrapper>
  );
}

export default QRCodePopup;
