import type { FC } from "react";
import { useCityName } from "@/shared/hooks/useDictionaries.js";
import "./StationDisplay.scss";

export interface StationDisplayProps {
  /** IATA airport code, e.g. "SVO" */
  airportCode: string;
  /** Airport name (optional, displayed if provided) */
  airportName?: string;
  /** City name override (falls back to useCityName hook) */
  cityName?: string;
}

/**
 * Renders an airport IATA code with city name.
 *
 * Layout: IATA code (bold) + city name below.
 */
export const StationDisplay: FC<StationDisplayProps> = ({
  airportCode,
  airportName,
  cityName,
}) => {
  const resolvedCity = cityName ?? useCityName(airportCode);

  return (
    <div className="station">
      <span className="station__code">{airportCode}</span>
      {airportName ? (
        <span className="station__name">{airportName}</span>
      ) : null}
      <span className="station__city">{resolvedCity}</span>
    </div>
  );
};
