/**
 * MF expose wrapper for the Flights Map feature.
 *
 * Lazy-loads the FlightsMapStartPage via React.lazy + Suspense.
 * Gated by the flightsMap feature flag.
 */

import { lazy, Suspense } from "react";
import type { HostContract } from "@/host-contract";
import { useFeatureFlag } from "@/features/flights-map/hooks/useFeatureFlag.js";

const FlightsMapStartPage = lazy(() =>
  import("@/features/flights-map/components/FlightsMapStartPage.js").then(
    (m) => ({ default: m.FlightsMapStartPage }),
  ),
);

export interface FlightsMapRemoteProps {
  hostContract: HostContract;
}

export default function FlightsMapRemote(_props: FlightsMapRemoteProps): JSX.Element {
  const isEnabled = useFeatureFlag("flightsMap");

  if (!isEnabled) {
    return (
      <div data-mf-expose="FlightsMap">
        <p>Flights Map is currently unavailable.</p>
      </div>
    );
  }

  return (
    <div data-mf-expose="FlightsMap">
      <Suspense fallback={<div aria-busy="true">Loading Flights Map...</div>}>
        <FlightsMapStartPage />
      </Suspense>
    </div>
  );
}
