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

export interface AircraftPanelProps {
  equipment: IEquipmentFull;
}

export const AircraftPanel: FC<AircraftPanelProps> = ({ equipment }) => {
  const { t } = useTranslation();
  const aircraft = equipment.aircraft;
  const actualTitle = aircraft?.actual?.title;
  const scheduledTitle = aircraft?.scheduled?.title;
  const configuration = aircraft?.configuration;

  // If actual has content and differs from scheduled, show both; otherwise
  // fall back to whichever is present.
  const showBoth = Boolean(actualTitle && scheduledTitle && actualTitle !== scheduledTitle);
  const primaryTitle = actualTitle || scheduledTitle;

  return (
    <div className="details-panel" data-testid="aircraft-panel">
      {showBoth ? (
        <>
          <div className="details-panel__row">
            <span className="details-panel__label">{t("DETAILS.ACTUAL")}</span>
            <span className="details-panel__value">{actualTitle}</span>
          </div>
          <div className="details-panel__row">
            <span className="details-panel__label">{t("DETAILS.SCHEDULED")}</span>
            <span className="details-panel__value">{scheduledTitle}</span>
          </div>
        </>
      ) : (
        primaryTitle && (
          <div className="details-panel__row">
            <span className="details-panel__label">{t("DETAILS.AIRCRAFT")}</span>
            <span className="details-panel__value">{primaryTitle}</span>
          </div>
        )
      )}
      {configuration && (
        <div className="details-panel__row">
          <span className="details-panel__label">{t("DETAILS.CONFIGURATION")}</span>
          <span className="details-panel__value">{configuration}</span>
        </div>
      )}
    </div>
  );
};
