import React, { FC, ReactNode } from 'react'

import { formatClassList, joinStrings, appendVariantClasses } from '../../utils'

type ContentAreaTypes = {
  children: ReactNode,
  className?: string,
  size: string,
  [other:string]: unknown
}

const CONTENTAREA: string = `
  bg-white
  rounded-lg
  pt-4
  pb-8
  px-6
  mb-8
`
const XL: string = `
`
const LG: string = `
  max-w-xl
`
const MD: string = `
  max-w-lg
`
const SM: string = `
  max-w-md
`
const XS: string = `
  max-w-sm
`
const SIZES: Record<string, string> = {
  'xl': XL,
  'lg': LG,
  'md': MD,
  'sm': SM,
  'xs': XS
}

const ContentArea:FC<ContentAreaTypes> = ({
  children,
  className,
  size='lg',
  ...other
}: ContentAreaTypes) => {
  let classList: string = formatClassList(
    appendVariantClasses(
      (className ? joinStrings(' ', CONTENTAREA, className) : CONTENTAREA),
      SIZES,
      size
    )
  )

  return (
    <div className={classList} {...other}>
      {children}
    </div>
  )
}

export default ContentArea