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

export interface LayoutProps {
  /* Controls how the flex grid items are positioned along the container */
  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
  /* Fixes the layout width to the current breakpoint */
  container?: boolean
  /* Sets the maximum width of the layout */
  maxWidth?:
  | '0'
  | 'none'
  | 'xs'
  | 'sm'
  | 'md'
  | 'lg'
  | 'xl'
  | '2xl'
  | '3xl'
  | '4xl'
  | '5xl'
  | '6xl'
  | '7xl'
  | 'full'
  /* Horizontally centers the layout */
  mxAuto?: boolean
  /*  Allows the layout to grow to the height of screen */
  fullHeight?: boolean
  /* Inner content of the layout */
  children: React.ReactNode
}

const styles = {
  base: 'w-full flex flex-col md:flex-row',
  container: 'container',
  mxAuto: 'mx-auto',
  fullHeight: 'h-screen'
}

export const Layout = ({
  children,
  container,
  justify,
  maxWidth,
  mxAuto,
  fullHeight,
  ...rest
}: LayoutProps) => {
  const className = classNames(
    styles.base,
    container && styles.container,
    mxAuto && styles.mxAuto,
    fullHeight && styles.fullHeight,
    justify && `justify-${justify}`,
    maxWidth && `max-w-${maxWidth}`
  )

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

Layout.Section = Section
