import React from 'react'
import '../../tailwind.css'
import { classNames } from '../../utils/css'

export interface SectionProps {
  /*  Allows the section to grow to the width of its container */
  fullWidth?: boolean
  /*  Sets the section to 50% of screen size */
  oneHalf?: boolean
  /*  Sets the section to 33.333333% of screen size */
  oneThird?: boolean
  /*  Sets the section to 25% of screen size */
  oneFourth?: boolean
  /*  Sets the section to 66.666667% of screen size */
  twoThird?: boolean
  /*  Sets the section to 66.666667% of screen size */
  noSpacing?: boolean
  /*  Controls the direction of the items */
  direction?: 'row' | 'row-reverse' | 'col' | 'col-reverse'
  /*  Controls how items are positioned along the section main axis */
  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
  /*  Controls how items are positioned along the section cross axis */
  align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch'
  /* Inner content of the section */
  children: React.ReactNode
}

const styles = {
  base: '',
  fullWidth: 'w-full',
  oneHalf: 'w-full md:w-1/2 flex flex-col flex-grow flex-shrink',
  oneThird: 'w-full md:w-1/3 flex flex-col flex-grow flex-shrink',
  oneFourth: 'w-full md:w-1/4 flex flex-col flex-grow flex-shrink',
  twoThird: 'w-full md:w-2/3 flex flex-col flex-grow flex-shrink',
  spacing: 'ml-4 mt-3'
}

export const Section = ({
  children,
  fullWidth,
  oneHalf,
  oneThird,
  oneFourth,
  twoThird,
  direction,
  justify,
  align,
  noSpacing
}: SectionProps) => {
  const className = classNames(
    styles.base,
    fullWidth && styles.fullWidth,
    oneHalf && styles.oneHalf,
    oneThird && styles.oneThird,
    oneFourth && styles.oneFourth,
    twoThird && styles.twoThird,
    direction && `flex-${direction}`,
    justify && `justify-${justify}`,
    align && `items-${align}`,
    !noSpacing && styles.spacing
  )

  return <div className={className}>{children}</div>
}
