import React, { ReactNode } from 'react';

import { Box } from '@cleartrip/ct-design-box';
import { useStyles } from '@cleartrip/ct-design-style-manager';
import type { Styles } from '@cleartrip/ct-design-types';

type ModalContentStyleConfig = {
  root?: Styles[];
  innerBox?: Styles[];
};

type ModalContentProps = {
  children: ReactNode;
  styleConfig?: ModalContentStyleConfig;
};

const ModalContent: React.FC<ModalContentProps> = ({ children, styleConfig }) => {
  const staticStyles = useStyles(
    (theme) => ({
      root: {
        overflowY: 'auto',
        flex: 1,
      },
      innerBox: {
        paddingTop: theme.spacing[6],
        paddingBottom: theme.spacing[6],
        paddingLeft: theme.spacing[4],
        paddingRight: theme.spacing[4],
        width: '100%',
      },
    }),
    [],
  );

  return (
    <Box boxSize='zero' styleConfig={{ root: [staticStyles.root, ...(styleConfig?.root ?? [])] }}>
      <Box boxSize='xLarge' styleConfig={{ root: [staticStyles.innerBox, ...(styleConfig?.innerBox ?? [])] }}>
        {children}
      </Box>
    </Box>
  );
};

export default ModalContent;