import * as React from 'react';
import { useQuery } from '@apollo/client';

import { IAnnouncement } from 'typings';
import { ANNOUNCEMENTS } from 'graphql/queries/announcements';

import { Announcement } from '@nova-hf/ui';

interface IAnnouncementsProps {
  internalRef: any,
  ui?: any;
}

const Announcements = ({ internalRef }: IAnnouncementsProps) => {

  const { data } = useQuery(ANNOUNCEMENTS);

  const announcementsToDisplay = data?.announcementCollection?.items
  .filter((item: IAnnouncement) => item.display?.includes('portal.nova.is'));

  return (
    <div id="announcements" ref={internalRef}>
      {announcementsToDisplay?.map(({ cookieId, text, link, linkText, color }: IAnnouncement, i: number) => (
        <Announcement
          key={cookieId || i.toString()}
          cookieId={cookieId}
          innerText={text}
          link={link}
          linkText={linkText}
          color={'pink' || color}
        />
      ))}
    </div>
  );
};

export default Announcements;