import React, {useState, useEffect} from "react";
import {Grid, Row, Col} from "react-bootstrap";

import GoogleMapCard from '../components/Kickboard/GoogleMapCard';
import KickboardStatusCard from '../components/Kickboard/KickboardStatusCard';
import KickboardHistoryTable from '../components/Kickboard/KickboardHistoryTable';
import SearchButton from '../components/Kickboard/SearchButton';

const Kickboard = () => {
  const [kbId, setKbId] = useState('000165');

  // 여기 API 요청
  return (
    <div className="content">
      <Grid fluid>
        <Row>
          <Col md={4} mdOffset={8} sm={3} smOffset={9} style={{marginBottom:15}}>
            <SearchButton/>
          </Col>
        </Row>
        <Row>
          <Col md={6}>
            <GoogleMapCard/>
          </Col>
          <Col md={6}>
            <KickboardStatusCard kbId={kbId}/>
          </Col>
        </Row>
        <Row>
          <Col md={12}>
            <KickboardHistoryTable kbId={kbId}/>
          </Col>
        </Row>
      </Grid>
    </div>
  );
};

export default Kickboard;