import './sncf.scss'
import {useParams} from "react-router-dom"
import TrainsTable from "./TrainsTable"
import {useEffect, useState} from "react";

function Station() {
  let {stopId} = useParams()
  let [stop, setStop] = useState({'name': "Chargement…"})

  useEffect(() => {
    fetch(`http://localhost:8000/api/gtfs/stop/${stopId}/`)
      .then(response => response.json())
      .then(data => {
        setStop(data)
      })
  }, [stopId])

  return (
    <div className="Station">
      <header className="App-header">
        <h1>Horaires en gare de {stop.name}</h1>
      </header>

      <main>
        <TrainsTable stop={stop} tableType="departures" />
        <TrainsTable stop={stop} tableType="arrivals" />
      </main>
    </div>
  )
}

export default Station;
