/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

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

import styles from './styles.module.css';

function AnnouncementBar(): JSX.Element | null {
  const {
    siteConfig: {themeConfig: {announcementBar = {}} = {}} = {},
  } = useDocusaurusContext();
  const {content, backgroundColor, textColor} = announcementBar;
  const {
    isAnnouncementBarClosed,
    closeAnnouncementBar,
  } = useUserPreferencesContext();

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

  return (
    <div
      className={styles.announcementBar}
      style={{backgroundColor, color: textColor}}
      role="banner">
      <div
        className={styles.announcementBarContent}
        // Developer provided the HTML, so assume it's safe.
        // eslint-disable-next-line react/no-danger
        dangerouslySetInnerHTML={{__html: content}}
      />

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

export default AnnouncementBar;
