import React, { useEffect, useState } from "react";
import { fetchFlights } from "../config/api.js";

const Flights = () => {
  const [flights, setFlights] = useState([]);

  useEffect(() => {
    fetchFlights()
      .then((data) => setFlights(data))
      .catch((error) => console.error(error));
  }, []);

  return (
    <div className="container mt-5">
      <h1>Available Flights</h1>
      <ul>
        {flights.map((flight, index) => (
          <li key={index}>{flight.name} - {flight.price}</li>
        ))}
      </ul>
    </div>
  );
};

export default Flights;