import React from 'react';
import { type EntityType } from './types';

interface ErrorReportProps {
    entity: EntityType;
    renderAdditionalErrors?: (entity: EntityType) => JSX.Element | null;
    title?: string;
}

export const GenericErrorReport = ({
    entity,
    renderAdditionalErrors,
    title = 'Errors',
}: ErrorReportProps) => {
    /**
     * Displays all of the entity errors for a given entity.
     */
    const { errors } = entity;

    return (
        <div className="entity-error-report">
            <h6>{title}</h6>
            {errors.length > 0 && (
                <div className="entity-error-report-item">
                    <ul>
                        {errors.map((error, index) => (
                            <li key={index}>
                                <strong>{error.column}:</strong> {error.message}{' '}
                                (
                                {$t(
                                    'bulkDigitalAudio.metadataErrorReport.value'
                                )}
                                : {error.value})
                            </li>
                        ))}
                    </ul>
                </div>
            )}
            {renderAdditionalErrors && renderAdditionalErrors(entity)}
        </div>
    );
};

export default GenericErrorReport;