import React from 'react'

type Props = { children:  React.ReactNode
               checkBox?: { label:    string
                            checked:  boolean
                            onChange: (event: React.ChangeEvent<HTMLInputElement>) => void } }


export default ({ children, checkBox }: Props) => {
  if (!(checkBox))
    {
      return (
          <label className="block font-semibold mb-1">
            {children}
          </label>)
    }

  return (
      <div className="flex gap-2 mb-1">
        <label className="flex-1 block font-semibold">{children}</label>
        <label className="flex items-center block gap-1">
          <input type="checkbox"
                 checked={checkBox.checked}
                 onChange={checkBox.onChange} />
          {checkBox.label}
        </label>
      </div>)
}