import React from 'react';

export interface PublishWarningsProps {
  warnings: string[];
  onDismiss: () => void;
}

/** Non-blocking banner shown after a successful publish. The site IS live --
 *  these are things the customer should fix and re-publish, not failures. */
export const PublishWarnings: React.FC<PublishWarningsProps> = ({ warnings, onDismiss }) => {
  if (!warnings.length) return null;

  return (
    <div className="publish-warnings" role="status" data-testid="publish-warnings">
      <i className="fa fa-exclamation-triangle" aria-hidden="true" />
      <ul>
        {warnings.map((w, i) => (
          <li key={i}>{w}</li>
        ))}
      </ul>
      <button
        type="button"
        onClick={onDismiss}
        aria-label="Dismiss"
        data-testid="publish-warnings-dismiss"
      >
        <i className="fa fa-times" aria-hidden="true" />
      </button>
    </div>
  );
};