type StatusFooterProps = {
  status: string;
  validationIssues: string[];
  parsedJsonError: string;
  recordDraftError: string;
};

export default function StatusFooter(props: StatusFooterProps) {
  const { status, validationIssues, parsedJsonError, recordDraftError } = props;

  return (
    <div className="status-row">
      <p className="status-text">{status}</p>
      {validationIssues.length > 0 ? <p className="status-error">Validation issues: {validationIssues.length}</p> : null}
      {validationIssues.length > 0 ? (
        <ul className="validation-list">
          {validationIssues.slice(0, 8).map((issue, index) => (
            <li key={`${issue}-${index}`}>{issue}</li>
          ))}
        </ul>
      ) : null}
      {parsedJsonError ? <p className="status-error">JSON error: {parsedJsonError}</p> : null}
      {recordDraftError ? <p className="status-error">Record draft error: {recordDraftError}</p> : null}
    </div>
  );
}
