import React, { useState } from "react";
import { Row, Col } from "antd";

import Filter from "./Filter";
import Result from "./Result";

import "./index.less";

function AstroList() {
  const [astroType, setAstroType] = useState("all");
  return (
    <section>
      <Row>
        <Col span className="astro-list">
          <h1>Astros</h1>
          <Filter onAstroTypeChange={(astroType) => setAstroType(astroType)} />
          <Result astroType={astroType} />
        </Col>
      </Row>
    </section>
  );
}

export default AstroList;