import { createContext, FC, PropsWithChildren, useContext } from 'react'
import styles from './Section.module.css'
import cx from 'classnames'

type SectionContextType = 'primary' | 'secondary' | 'tertiary' | undefined

interface Props {
  color?: SectionContextType
}

const SectionContext = createContext<SectionContextType>(undefined)
export const useSectionColor = () => useContext(SectionContext)

export const Section: FC<PropsWithChildren<Props>> = ({ color, children }) => {
  return (
    <div
      className={cx(styles.content, {
        [styles.primary]: color === 'primary',
        [styles.secondary]: color === 'secondary',
        [styles.tertiary]: color === 'tertiary'
      })}
    >
      <SectionContext.Provider value={color}>{children}</SectionContext.Provider>
    </div>
  )
}