import "./SwapCityButton.scss";

/**
 * Swap-cities button used between the departure and arrival CityAutocomplete
 * inputs in every filter (OnlineBoard route, Schedule, FlightsMap).
 *
 * The DOM shape mirrors Angular's `.change-container > .button-change >
 * .svg--change-city` so the global `.svg--change-city` rule in
 * `styles/_icons.scss` renders the sprite identically on every page.
 * Each caller keeps its own onClick handler — swap semantics differ between
 * pages (Schedule clears validation, FlightsMap routes through a state
 * service, OnlineBoard just swaps values), so only the DOM/CSS is shared.
 */

export interface SwapCityButtonProps {
  onClick: () => void;
  /** data-testid for the inner <button>. */
  testId?: string;
  /** Accessible label. Defaults to "swap". */
  ariaLabel?: string;
}

export function SwapCityButton({
  onClick,
  testId,
  ariaLabel = "swap",
}: SwapCityButtonProps): JSX.Element {
  return (
    <div className="change-container">
      <button
        type="button"
        className="button-change"
        onClick={onClick}
        aria-label={ariaLabel}
        data-testid={testId}
      >
        <svg className="svg--change-city">
          <use xlinkHref="/assets/img/sprite.svg#changeCity" />
        </svg>
      </button>
    </div>
  );
}
