import React from 'react'

import '../tailwind.css'

import { Header, HeaderProps } from './components/Header'
import { classNames } from '../utils/css'

export interface PageProps extends HeaderProps {
  /* Remove the normal max-width on the page */
  fullWidth?: boolean
  /* Decreases the maximum layout width. Intended for single-column layouts */
  narrowWidth?: boolean
  /* Inner content of the element */
  children: React.ReactNode
}

const styles = {
  base: 'flex flex-col',
  narrowWidth: 'container',
  fullWidth: 'w-full'
}

export const Page = ({
  children,
  narrowWidth,
  fullWidth,
  ...rest
}: PageProps) => {
  const className = classNames(
    styles.base,
    narrowWidth && styles.narrowWidth,
    (fullWidth || !narrowWidth) && styles.fullWidth
  )

  const hasHeaderContent =
    (rest.title != null && rest.title !== '') ||
    rest.upward != null

  const headerMarkup = hasHeaderContent ? <Header {...rest} /> : null

  return (
    // This wrapper element is only used for compatibility with the renderToDom flex prop and until
    // we use the Frame component to that will provide the structure for the application.
    <div className="w-full font-sans">
      {headerMarkup}
      <div className={className}>{children}</div>
    </div>
  )
}
