import type { TguPlanUi } from "../../model/timelineTypes";
import { platformLabel } from "../tgu-planning/tguTimelineMapper";
import { statusStyle } from "../tgu-planning/tguStatus";

type Tgu2DMapDetailsProps = {
  selectedPlan?: TguPlanUi;
};

/**
 * Нижняя плашка контекста вкладки «Карта»: какой план выбран на «Планах» (КА/статус).
 * Информация по объектам карты живёт в правом инспекторе (MapObjectInspector), не здесь.
 */
export function Tgu2DMapDetails({ selectedPlan }: Tgu2DMapDetailsProps) {
  const status = selectedPlan ? statusStyle(selectedPlan.status) : undefined;

  return (
    <section className="tgu-map-details">
      <div>
        <div className="tgu-map-details__label">План</div>
        <div className="tgu-map-details__value mono">{selectedPlan?.planId || "-"}</div>
      </div>
      <div>
        <div className="tgu-map-details__label">КА</div>
        <div className="tgu-map-details__value">
          {selectedPlan ? platformLabel(selectedPlan.platform, selectedPlan.spacecraftId) : "-"}
        </div>
      </div>
      <div>
        <div className="tgu-map-details__label">Статус</div>
        <div className="tgu-map-details__value">
          {status ? (
            <span className="tgu-map-status-pill">
              <i style={{ backgroundColor: status.color }} />
              {status.label}
            </span>
          ) : "-"}
        </div>
      </div>
    </section>
  );
}