import { useState } from "react";
import { FiX } from "react-icons/fi";
import styles from "./announce.module.scss";
import { BsFillMegaphoneFill } from "react-icons/bs";

interface AnnouncementProps {
  announcement: string;
}

const Announcement: React.FC<AnnouncementProps> = ({
  announcement,
}) => {
  const [visible, setVisible] = useState(true);

  if (!visible || !announcement) {
    return null;
  }

  return (
    <div className={styles.announcement}>
      <div className={styles.announcement__glow} />

      <div className={styles.announcement__left}>
        <div className={styles.announcement__icon}>
          <BsFillMegaphoneFill size={16} />
        </div>

        <div className={styles.announcement__content}>
          <div className={styles.announcement__header}>
            <span>Platform Announcement</span>
          </div>

          <p>{announcement}</p>
        </div>
      </div>

      <button
        type="button"
        className={styles.announcement__close}
        onClick={() => setVisible(false)}
      >
        <FiX size={16} />
      </button>
    </div>
  );
};

export default Announcement;