import type { FC } from "react";
import type { FlightStatus as FlightStatusType } from "@/features/online-board/types.js";
import "./FlightStatus.scss";

export interface FlightStatusProps {
  status: FlightStatusType;
}

const STATUS_LABELS: Record<FlightStatusType, string> = {
  Scheduled: "Scheduled",
  Sent: "Departed",
  InFlight: "In Flight",
  Landed: "Landed",
  Arrived: "Arrived",
  Delayed: "Delayed",
  Cancelled: "Cancelled",
  Unknown: "Unknown",
};

const STATUS_CLASSES: Record<FlightStatusType, string> = {
  Scheduled: "flight-status--scheduled",
  Sent: "flight-status--departed",
  InFlight: "flight-status--in-flight",
  Landed: "flight-status--landed",
  Arrived: "flight-status--arrived",
  Delayed: "flight-status--delayed",
  Cancelled: "flight-status--cancelled",
  Unknown: "flight-status--unknown",
};

/**
 * Flight status badge with semantic CSS class for styling.
 */
export const FlightStatus: FC<FlightStatusProps> = ({ status }) => {
  return (
    <span className={`flight-status ${STATUS_CLASSES[status]}`}>
      {STATUS_LABELS[status]}
    </span>
  );
};
