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

export interface FlightEventsProps {
  changeRoute: boolean;
  reroute: boolean;
  showDescription?: boolean;
}

export const FlightEvents: FC<FlightEventsProps> = ({ changeRoute, reroute, showDescription }) => {
  const { t } = useTranslation();
  if (!changeRoute && !reroute) return null;

  return (
    <div className="flight-events">
      {changeRoute && (
        <div className="flight-events__event" data-testid="flight-event-change-route">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
            <g fill="none" stroke="#f37b09" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12.356 3.497H.5" />
              <path d="M3.29 6.286.5 3.496 3.29.707" />
              <path d="M6.864 9.076H18.72" />
              <path d="m15.93 6.286 2.79 2.79-2.79 2.79" />
            </g>
          </svg>
          {showDescription && (
            <span className="flight-events__description">{t("SHARED.ROUTE-CHANGE")}</span>
          )}
        </div>
      )}
      {reroute && (
        <div className="flight-events__event" data-testid="flight-event-reroute">
          <svg xmlns="http://www.w3.org/2000/svg" width="13" height="6" viewBox="0 0 13 6">
            <path
              d="M6.125.583A6.1 6.1 0 0 0 2.1 2.1L0 0v5.25h5.25L3.138 3.138a4.65 4.65 0 0 1 7.42 2.112l1.382-.455A6.133 6.133 0 0 0 6.125.583Z"
              fill="#c8102e"
            />
          </svg>
          {showDescription && (
            <span className="flight-events__description">{t("SHARED.RETURN")}</span>
          )}
        </div>
      )}
    </div>
  );
};
