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

export interface FlightListSkeletonProps {
  /** Number of skeleton rows to display (default: 5) */
  count?: number;
}

/**
 * Loading placeholder for a flight list.
 * Renders N animated placeholder rows.
 */
export const FlightListSkeleton: FC<FlightListSkeletonProps> = ({
  count = 5,
}) => {
  const { t } = useTranslation();
  return (
    <div className="flight-list-skeleton" aria-busy="true" aria-label={t("SHARED.A11Y-LOADING-FLIGHTS")}>
      {Array.from({ length: count }, (_, i) => (
        <div key={i} className="flight-list-skeleton__row">
          <div className="flight-list-skeleton__cell flight-list-skeleton__cell--number" />
          <div className="flight-list-skeleton__cell flight-list-skeleton__cell--station" />
          <div className="flight-list-skeleton__cell flight-list-skeleton__cell--time" />
          <div className="flight-list-skeleton__cell flight-list-skeleton__cell--station" />
          <div className="flight-list-skeleton__cell flight-list-skeleton__cell--time" />
          <div className="flight-list-skeleton__cell flight-list-skeleton__cell--status" />
        </div>
      ))}
    </div>
  );
};
