import React from "react"
import cx from "classnames"
import Note from "../note"
import { useFormContext } from "../../hooks/use-form"

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)

function ValidationErrors() {
  const { errors } = useFormContext()
  const keys = Object.keys(errors)

  if (keys.length === 0) return null

  return (
    <Note className="mb-2" type="warning">
      <ul className="list-none p-0">
        {keys.map((key, index) => {
          const label = capitalize(key.replace("_", " "))
          const message = errors[key].join("; ")
          const className = cx({ "mt-1": index > 0 })

          return (
            <li className={className} key={key}>{`${label} ${message}`}</li>
          )
        })}
      </ul>
    </Note>
  )
}

export default ValidationErrors
