import React from 'react';
import { observer } from 'mobx-react-lite';
import {
  Box,
  CustomModalLayout,
  CustomModalLayoutProps,
} from '@wix/design-system';
import { st, classes } from './PickerContent.st.css.js';

export interface PickerContentBaseWrappedProps
  extends Partial<CustomModalLayoutProps> {}

function _PickerContentBaseWrapped(props: PickerContentBaseWrappedProps) {
  const { className, children, onCloseButtonClick, closeButtonProps, ...rest } =
    props;

  return (
    <CustomModalLayout
      className={st(classes.root, {}, className)}
      removeContentPadding
      showFooterDivider
      closeButtonProps={{
        autoFocus: true,
        ...closeButtonProps,
        onClick: (event) => {
          onCloseButtonClick?.(event);
          closeButtonProps?.onClick?.(event);
        },
      }}
      {...rest}
    >
      <Box height="100%" flex={1} direction="vertical">
        {children}
      </Box>
    </CustomModalLayout>
  );
}
export const PickerContentBaseWrapped = observer(_PickerContentBaseWrapped);