const ErrorSummary = ({ hasErrors, errorItems }) => {
    return hasErrors ? (
        <div
            className="govuk-error-summary"
            aria-labelledby="error-summary-title"
            role="alert"
            tabIndex="-1"
            data-module="govuk-error-summary"
        >
            <h2 className="govuk-error-summary__title" id="error-summary-title">
                The following fields have a problem :
            </h2>
            <div className="govuk-error-summary__body">
                <ul className="govuk-list govuk-error-summary__list">
                    {errorItems.map((item, i) => (
                        <li key={i}>
                            <a href={"#" + item.field + "_label"}>
                                {" "}
                                {item.label}
                            </a>
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    ) : (
        ""
    );
};

export default ErrorSummary;