import React, { useState, useEffect } from "react";
import { CardGroup, NewsSection } from "../../components";
// references https://misago.live/guides/ no authentication
// add admin functionality
export const News = () => {
  const [news, setNews] = useState([]);

  const newsApiRequest = async () => {
    try {
      const data = await fetch(
        "https://api.bing.microsoft.com/v7.0/news?mkt=en-us&category=health",
        {
          headers: {
            "Ocp-Apim-Subscription-Key": process.env.REACT_APP_API_KEY,
          },
        }
      );
      const { value: newsList } = await data.json();

      setNews(newsList);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    newsApiRequest();
  }, []);

  return (
    <div>
      <CardGroup />
      <NewsSection news={news} />
    </div>
  );
};
