import React from 'react'
import '../tailwind.css'

import { classNames } from '../utils/css'
import { InlineError } from '../InlineError/InlineError'

export interface LabelledProps {
  /* Label for the input */
  label: string
  /* Error to display beneath the label */
  error?: string
  /* Additional hint text to display */
  helpText?: string
  /* Disable the label */
  disabled?: boolean
  /* Inner content of the element */
  children?: React.ReactNode
}

const labelStyles = {
  base: 'block text-sm font-medium bg-primary-background',
  default: 'text-primary-text',
  error: 'text-negative-text',
  disabled: 'text-disabled-text'
}

export const Labelled = ({
  children,
  label,
  helpText,
  error,
}: LabelledProps) => {

  const labelClass = classNames(
    labelStyles.base,
    !error && labelStyles.default,
    error && labelStyles.error
  )

  const helpTextMarkup = helpText && (
    <div className="mt-2 text-sm text-secondary-text">{helpText}</div>
  )
  const errorMarkup = error && typeof error !== 'boolean' && (
    <div className="mt-2">
      <InlineError message={error} />
    </div>
  )

  return (
    <>
      <label className={labelClass}>{label}</label>
      {children}
      {helpTextMarkup}
      {errorMarkup}
    </>
  )
}
