import * as React from 'react'
import cx from 'classnames'

interface FieldProps {
  columnWidth: number
  fieldInfo?: React.ReactNode
  columnHeader?: React.ReactNode
  children?: React.ReactNode
  className?: string
}

export const Field = ({ columnWidth, fieldInfo, columnHeader, children, className }: FieldProps) => (
  <div className={cx(`col-xs-${columnWidth}`, className)}>
    <h2 className={cx({ 'has-subheader': fieldInfo })}>{ columnHeader }</h2>
    {fieldInfo && <p className="field-info">{fieldInfo}</p>}
    {children}
  </div>
)