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 className="content astro-list">
      <Row>
        <Col span={24}>
          <p>Escolha o tipo de <b>astro</b> que procura e clique na imagem para ver mais detalhes. </p>
        </Col>
      </Row>      
      <Filter onAstroTypeChange={(astroType) => setAstroType(astroType)} />
      <Result astroType={astroType} />
    </section>
  );
}

export default AstroList;