import type { FC } from "react";
import type { ISimpleFlight } from "@/features/online-board/types.js";
import { FlightCard } from "./FlightCard.js";
import { FlightListSkeleton } from "./FlightListSkeleton.js";
import "./FlightList.scss";

export interface FlightListProps {
  /** Array of flights to display */
  flights: ISimpleFlight[];
  /** Whether the list is in a loading state */
  loading?: boolean;
  /** Number of skeleton rows when loading (default: 5) */
  skeletonCount?: number;
}

/**
 * List of FlightCards with loading skeleton support.
 *
 * Shows FlightListSkeleton when loading, the flight list otherwise.
 * Displays an empty-state message when flights array is empty and not loading.
 */
export const FlightList: FC<FlightListProps> = ({
  flights,
  loading = false,
  skeletonCount = 5,
}) => {
  if (loading) {
    return <FlightListSkeleton count={skeletonCount} />;
  }

  if (flights.length === 0) {
    return (
      <div className="flight-list flight-list--empty">
        <p className="flight-list__empty-message">No flights found</p>
      </div>
    );
  }

  return (
    <div className="flight-list">
      {flights.map((flight) => (
        <FlightCard key={flight.id} flight={flight} />
      ))}
    </div>
  );
};
