import { CSSProperties, PropsWithChildren } from 'react'
import defaultStyle from './style.module.scss'

interface ContainerProps {
  style?: CSSProperties
  className?: string
}

/**
 * Container component with pre-defined width, padding and margins for top level layout.
 *
 * **Important:** To avoid conflicts with `defaultStyle` (changing the `width`, `max-width`, `padding-inline`, and/or `margin-inline`) make sure to either:
 * - When using *className* override, that styles are imported after the actual `Container` component
 * ```
 * import { Container } from './components/Container'
 * import styles from './style.module.scss'
 * ```
 * - or add *!important* to imported styles
 * - or override styles with *CSSProperties* object
 */
export const Container = ({
  style = {},
  className = '',
  children
}: PropsWithChildren<ContainerProps>) => {
  return (
    <div
      style={{
        ...style
      }}
      className={`${defaultStyle.container} ${className}`}
    >
      {children}
    </div>
  )
}