/* eslint-disable @typescript-eslint/no-explicit-any */
import { Modal } from "@/utils/model/src";
import { ACTION_MODAL_WIDTH } from "../PublicTypes/ResourceGenerator"
import { modalContentStyle } from "../PublicTypes/ResourceGenerator/components/ActionGenerator/style";
import { ModalHeader } from "../PublicTypes/ResourceGenerator/components/ActionGenerator/Header";
import Screen from "./Screen";

const ScreenPanel = (props: any) => {
  const { visible, isMaskClosable, handleCancelModal } = props;
  return (
    <Modal
      w={`${ACTION_MODAL_WIDTH}px`}
      visible={visible}
      footer={false}
      closable
      z={5}
      maskClosable={isMaskClosable}
      withoutLine
      withoutPadding
      onCancel={handleCancelModal}
      focusLock={false}
    >
      <div css={modalContentStyle}>
        <ModalHeader title={"Screen Editor"} onClickClose={handleCancelModal} />
        <Screen />
      </div>
    </Modal>
  );
};

export default ScreenPanel;