import { BookingPackageFlight } from "@qite/tide-client/build/types";
import React from "react";
import { useSelector } from "react-redux";
import { selectTranslations } from "../booking/selectors";
import { getDateText, parseFlightLines } from "../sidebar/sidebar-util";

interface SummaryFlightProps {
  flight: BookingPackageFlight;
  header: string;
}

const SummaryFlight: React.FC<SummaryFlightProps> = ({ flight, header }) => {
  const translations = useSelector(selectTranslations);
  
  return (
    <li>
      <h6>{header}</h6>
      {parseFlightLines(flight.flightMetaData)?.map((flightLine) => (
        <p key={flightLine.departureAirportIata}>
          {flightLine.departureAirportDescription} (
          {flightLine.departureAirportIata}) &gt;{" "}
          {flightLine.arrivalAirportDescription} (
          {flightLine.arrivalAirportIata}) {" - "}
          {flightLine.travelClass}
          <br />
          {getDateText(flightLine.departureDate)} {flightLine.departureTime}{" "}
          &gt; {getDateText(flightLine.arrivalDate)} {flightLine.arrivalTime}
          <br />
          {flightLine.airlineDescription}
        </p>
      ))}
      {flight.flightMetaData.luggageIncluded && (
        <p>{translations.SIDEBAR.LUGGAGE_INCLUDED}</p>
      )}
    </li>
  );
};

export default SummaryFlight;