import { Heading } from 'components/common';

interface ModalContainerProps {
  title?: string;
  width?: number | string;
  children: React.ReactNode;
}

export const ModalContainer = ({
  title,
  width = 400,
  children,
}: ModalContainerProps) => {
  return (
    <div className="bg-white rounded4 shadow" style={{ width, zIndex: 9999 }}>
      {title && (
        <Heading
          align="center"
          className="padding4"
          style={{ borderBottom: '1px solid var(--borderColor)' }}
        >
          {title}
        </Heading>
      )}
      {children && <div className="paddingX4 marginY4">{children}</div>}
    </div>
  );
};