import React from "react"
import Checkbox from "../checkbox"

import { useField } from "../../hooks/use-form"

// TODO: handle arrays
function CheckboxField({ id, name, label, placeholder, value, onChange }) {
  const field = useField({ id, name, value, onChange })

  return (
    <div className="flex items-center">
      <Checkbox
        id={field.id}
        name={name}
        placeholder={placeholder}
        onBlur={field.onBlur}
        onChange={field.onChange}
        checked={field.value}
      />
      <label className="ml-2 mb-0 font-sans text-gray-900" htmlFor={field.id}>
        {label}
      </label>
    </div>
  )
}

export default CheckboxField
