import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';

function AnnounceBar() {
  const { siteConfig: { themeConfig: { announcementBar = {} } = {} } = {} } = useDocusaurusContext();
  const { content, backgroundColor, textColor: color } = announcementBar;
  const { isAnnouncementBarClosed, closeAnnouncementBar } = useUserPreferencesContext();

  if (!content || isAnnouncementBarClosed) {
    return null;
  }

  return (
    <div className="announce-bar" style={{ backgroundColor, color }} role="banner">
      <div className="wrap-last frame announce-bar-inner">
        <div
          className="announce-bar-content"
          // eslint-disable-next-line react/no-danger
          dangerouslySetInnerHTML={{ __html: content }}
        />

        <button
          type="button"
          className="announce-bar-close"
          onClick={closeAnnouncementBar}
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    </div>
  );
}

export default AnnounceBar;