import QRIcon from "../icons/QRIcon";
import ShareFilledIcon from "../icons/ShareFilledIcon";
import PopupWrapper from "../PopupWrapper";
import Button from "../ui/Button";
import LinkShare from "../ui/LinkShare";
import usePopupStore from "../../store/popupStore";
import QRCodePopup from "./QRCodePopup";

function SharePopup({ link }: { link: string }) {
  const { setPopup } = usePopupStore();

  return (
    <PopupWrapper
      title="Пригласить"
      draggable
      leftButton={
        <Button
          variant="secondary"
          size="small"
          onClick={() => setPopup(<QRCodePopup link={link} />)}
        >
          <div className="2xl:size-[1.111vw] size-4">
            <QRIcon />
          </div>
        </Button>
      }
    >
      <div className="mb-[1.389vw]">
        <p className="title-s mb-[0.833vw] font-medium">Скопировать ссылку</p>
        <LinkShare link={link} />
      </div>
      <Button variant="primary" size="large" className="w-full">
        Отправить
        <div className="2xl:size-[1.111vw] size-4">
          <ShareFilledIcon />
        </div>
      </Button>
    </PopupWrapper>
  );
}

export default SharePopup;
