import { observer } from "mobx-react";
// ui
import { EModalPosition, EModalWidth, ModalCore } from "@buzzwaretech/ui";
// components
import { ProductUpdatesFooter } from "@/components/global";
// buzzwareTech web components
import { ProductUpdatesChangelog } from "@/buzzwareTech-web/components/global/product-updates/changelog";
import { ProductUpdatesHeader } from "@/buzzwareTech-web/components/global/product-updates/header";

export type ProductUpdatesModalProps = {
  isOpen: boolean;
  handleClose: () => void;
};

export const ProductUpdatesModal = observer(function ProductUpdatesModal(
  props: ProductUpdatesModalProps,
) {
  const { isOpen, handleClose } = props;

  return (
    <ModalCore
      isOpen={isOpen}
      handleClose={handleClose}
      position={EModalPosition.CENTER}
      width={EModalWidth.XXXXL}
    >
      <ProductUpdatesHeader />
      <ProductUpdatesChangelog />
      <ProductUpdatesFooter />
    </ModalCore>
  );
});