import React, {useState} from "react";
import useBridges from "../Hooks/bridge";
import Bridge from "./Bridge";
import {Button, FormGroup} from "reactstrap";
import BridgeModal from "./Modals/BridgeModal";

function Bridges() {
  const [modal, setModal] = useState(false);
  const {bridges} = useBridges();
  if (bridges === null) {
    return <></>;
  }

  return (
    <div>
      {bridges.map(bridge => <Bridge key={bridge.id} {...bridge} />)}
      <FormGroup className="free-buttons">
        <Button color="success" onClick={() => setModal(true)} >Søk etter bru</Button>
      </FormGroup>
      {modal && <BridgeModal onCancel={() => setModal(false)}/> }
    </div>
  );
}

export default Bridges;