import ModalWrapper from "../ModalWrapper";
import Button from "../ui/Button";
import useModalStore from "../../store/modalStore";

function EndTranslationModal() {
  const { setModal } = useModalStore();

  return (
    <ModalWrapper className="2xl:w-[21.667vw] w-[86.667vw]">
      <div className="flex flex-col items-center text-center">
        <h2 className="title-m 2xl:mb-[0.556vw] 2xl:px-[2.5vw] mb-[2.222vw] px-[10vw]">
          Трансляция завершилась
        </h2>
        <p className="text-s text-[#CCCCCC] 2xl:mb-[1.667vw] mb-[3.889vw]">
          Но вы можете продолжить общение и подвести итоги встречи
        </p>
        <Button
          variant="primary"
          size="medium"
          className="w-full"
          onClick={() => setModal(null)}
        >
          Понятно
        </Button>
      </div>
    </ModalWrapper>
  );
}

export default EndTranslationModal;
