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


const ThemePanel = (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={"Theme Editor"} onClickClose={handleCancelModal} />
          <Theme />
       
      </div>
    </Modal>
  );
};
 
export default ThemePanel;
