import React, { useEffect, useState } from "react";
import styles from "./News.module.scss";
import { TopicsCard, ArticlesCard } from "../../components/News";
import axios from "axios";
import { CardGroup, Container, Row, Col } from "reactstrap";

export default function News({ data }) {
  const [city, setCity] = useState("Miami");
  const [topics, setTopics] = useState(["Pandemic", "Extreme Weather", "Rising Temperatures", "Sea Level Rise", "Coastal Ecosystems", "Energy Consumption", "Sustainable Materials", "Recycling/Upcycling", "Green Technology", "Citizen Science", "Community Engagement"]);
  const [selectedTopics, setSelectedTopics] = useState(["Pandemic"])
  const [articles, setArticles] = useState([]);

  useEffect(async () => {
    let response = await axios({
      method: 'get',
      url: '/newsapi',
      params: {
        community: city
      }
    })
    setArticles(response.data);
  }, []);

  return (
    <Container fluid className="flex-column">
      <Row>
        <Col xs={12} lg={3} className={`${styles.col} g-2`}>
          <TopicsCard
            city={city}
            topics={topics}
            selectedTopics={selectedTopics}
            setSelectedTopics={setSelectedTopics}
            type={"articles"}
          />
        </Col>
        <Col xs={12} lg={9} className={`${styles.col} g-2`}>
          <ArticlesCard articles={articles} selectedTopics={selectedTopics} />
        </Col>
      </Row>
    </Container>

  );
}