import React, { useEffect, useState } from "react";

/**
 * Объект с данными для отображения в блоке с ошибками
 */
export interface FormValidErrObject
{
  fieldName: string | null,
  fieldErrors: string[] | []
}

export default function FormValidErr ( {visible, validErrorsObj}: {visible: boolean, validErrorsObj: FormValidErrObject[]} ) 
{
  const [blockVisible, setBlockVisible] = useState<boolean>(false);
  useEffect ( () => {
    setBlockVisible(visible)
  }, [visible]);
  return (
    <div id="form-valid-err-container" className={`form-valid-err--${blockVisible ? "visible" : 'hide'}`}>
      <ul>
      { validErrorsObj.map( (validErrObj: FormValidErrObject, index: number) => (
        <li key={index}>
          <b>{ validErrObj.fieldName }</b>: 
          <span>{ validErrObj.fieldErrors }</span>
        </li>
      )) }
      </ul>
    </div>
  )
}