import React, { useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom";
import { Helmet } from "react-helmet";
import { fetchFlights } from "../config/api.js"; // Ensure this function fetches flight data

const FlightsResults = () => {
  const [searchParams] = useSearchParams();
  const origin = searchParams.get("origin");
  const destination = searchParams.get("destination");
  const date = searchParams.get("date");
  const passengers = searchParams.get("passengers");

  const [flights, setFlights] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchFlights({ origin, destination, date, passengers })
      .then((data) => {
        setFlights(data);
        setLoading(false);
      })
      .catch((error) => {
        console.error(error);
        setLoading(false);
      });
  }, [origin, destination, date, passengers]);

  return (
    <div className="container mt-5">
      <Helmet>
        <title>hlafly - Flight Results</title>
        <meta name="description" content={`Find flights from ${origin} to ${destination} on ${date}.`} />
      </Helmet>

      <h1 className="mb-4">Flight Results</h1>

      {loading ? (
        <p>Loading flights...</p>
      ) : flights.length === 0 ? (
        <p>No flights available for this route.</p>
      ) : (
        <ul className="list-group">
          {flights.map((flight, index) => (
            <li key={index} className="list-group-item">
              {flight.name} - ${flight.price} | {flight.departure} → {flight.arrival}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default FlightsResults;