import type { FC } from "react";
import { useTranslation } from "@/i18n/provider.js";
import type { IFlightTransitionItem, FlightTransitionStatus } from "../../types.js";
import "./panels.scss";

const STATUS_KEYS: Record<FlightTransitionStatus, string> = {
  Finished: "DETAILS.STATUS_FINISHED",
  Expected: "DETAILS.STATUS_EXPECTED",
  InProgress: "DETAILS.STATUS_IN_PROGRESS",
  Specified: "DETAILS.STATUS_SPECIFIED",
  Scheduled: "DETAILS.STATUS_SCHEDULED",
};

export interface BoardingPanelProps {
  item: IFlightTransitionItem;
}

export const BoardingPanel: FC<BoardingPanelProps> = ({ item }) => {
  const { t } = useTranslation();
  const hasEnd = Boolean(item.end?.local);

  return (
    <div className="details-panel" data-testid="boarding-panel">
      <div className="details-panel__row">
        <span className="details-panel__label">{t("DETAILS.STATUS")}</span>
        <span className="details-panel__status">{t(STATUS_KEYS[item.status])}</span>
      </div>
      <div className="details-panel__row">
        <span className="details-panel__label">{t("DETAILS.SCHEDULED")}</span>
        <span className="details-panel__value">{item.start.local}</span>
      </div>
      {hasEnd && (
        <div className="details-panel__row">
          <span className="details-panel__label">{t("DETAILS.ACTUAL")}</span>
          <span className="details-panel__value">{item.end.local}</span>
        </div>
      )}
    </div>
  );
};
