import { CardGroup, Container, Row, Col } from "reactstrap";
import { useState } from "react";
import styles from "./DiscussionBoard.module.scss";
import { TopicsCard } from "../News/TopicsCard/TopicsCard"
import { DiscussionCard } from "../DiscussionBoard/DiscussionCard/DiscussionCard.jsx";
import { PostsCard } from "../DiscussionBoard/PostsCard/PostsCard.jsx";

export function DiscussionBoard(props) {
  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", "Extreme Weather", "Rising Temperatures", "Sea Level Rise", "Coastal Ecosystems", "Energy Consumption", "Sustainable Materials", "Recycling/Upcycling", "Green Technology", "Citizen Science", "Community Engagement"])


  return (
    <>
      <Container fluid className="flex-column">
        <Row>
          <Col xs={12} sm={12} md={5} xl={3} xxl={2} className={`${styles.col} g-2`}>
            <TopicsCard
              city={city}
              topics={topics}
              selectedTopics={selectedTopics}
              setSelectedTopics={setSelectedTopics}
              type={"posts"} />
          </Col>
          <Col xs={12} sm={12} md={7} xl={4} xxl={4} className={`${styles.col} g-2`}>
            <PostsCard posts={props.posts} selectedTopics={selectedTopics} />
          </Col>
          <Col xs={12} sm={12} md={12} xl={5} xxl={6} className={`${styles.col} g-2`}>
            <DiscussionCard user={props.user} />
          </Col>
        </Row>
      </Container>
    </>
  );
}