import classNames from 'classnames'
import styles from "./styles.module.scss"

export type BackgroundColor = "soft" | "off-white" | undefined

type SectionProps = {
  backgroundColor?: BackgroundColor
  children?: React.ReactNode;
  padding?: "small" | "medium" | "large"
  paddingBottom?: "small" | "medium" | "large"
}

export const Section = ({ children, backgroundColor, padding = "large", paddingBottom }: SectionProps) => {
  return (
    <section className={classNames({
      [styles.large]: padding == "large",
      [styles.medium]: padding == "medium",
      [styles.small]: padding == "small",
      [styles.largeBottom]: paddingBottom == "large",
      [styles.mediumBottom]: paddingBottom == "medium",
      [styles.smallBottom]: paddingBottom == "small",
      [styles.shade2]: backgroundColor === "soft",
      [styles.shade3]: backgroundColor === "off-white"
    })}>
      {children}
    </section>
  )
}