import React from 'react'

import { cn } from '@/lib/utils'

import type { FC } from 'react'

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


const Label: FC<Props> = ({ children, checkBox, invalid }: Props) => {
  const labelClassName = cn ('block font-semibold mb-1',
			     invalid && 'text-red-700 dark:text-red-300')

  if (!(checkBox))
    {
      return (
	  <label className={labelClassName}>
	    {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>)
}


export default Label