import type { FC } from "react";
import type { IFlightLegStation } from "../../types.js";
import { Station } from "./Station.js";
import { detectStationChange } from "./detectStationChange.js";

export interface StationChangeProps {
  from: IFlightLegStation;
  to: IFlightLegStation;
}

function formatAirportWithTerminal(station: IFlightLegStation): string {
  const code = station.scheduled.airportCode;
  return station.terminal ? `${code}/${station.terminal}` : code;
}

export const StationChange: FC<StationChangeProps> = ({ from, to }) => {
  const changeType = detectStationChange(from, to);

  if (changeType === "noChange") {
    return <Station station={from} />;
  }

  if (changeType === "city") {
    return (
      <div className="station-change station-change--city">
        <Station station={from} />
        <span className="station-change__arrow" aria-hidden="true">{"\u2192"}</span>
        <Station station={to} />
      </div>
    );
  }

  // airport or terminal — same city
  return (
    <div className={`station-change station-change--${changeType}`}>
      <span className="station-change__city">{from.scheduled.city}</span>
      <span className="station-change__code">{formatAirportWithTerminal(from)}</span>
      <span className="station-change__arrow" aria-hidden="true">{"\u2192"}</span>
      <span className="station-change__code">{formatAirportWithTerminal(to)}</span>
    </div>
  );
};
