"use client";

import dynamic from "next/dynamic";
import { Suspense } from "react";
import { useSearchParams } from "next/navigation";

const TradingChart = dynamic(
  () => import("@/components/TradingChart").then((mod) => mod.TradingChart),
  {
    ssr: false,
    loading: () => <p className="status">Loading chart…</p>,
  },
);

function TradingChartFromUrl({
  oandaConfigured,
}: {
  oandaConfigured: boolean;
}) {
  const searchParams = useSearchParams();
  const initialCatalogOpen = searchParams.get("catalog") === "1";
  return (
    <TradingChart
      oandaConfigured={oandaConfigured}
      initialCatalogOpen={initialCatalogOpen}
    />
  );
}

export function TradingChartClient({
  oandaConfigured,
}: {
  oandaConfigured: boolean;
}) {
  return (
    <Suspense fallback={<p className="status">Loading chart…</p>}>
      <TradingChartFromUrl oandaConfigured={oandaConfigured} />
    </Suspense>
  );
}