"use client";

import dynamic from "next/dynamic";

const MarketOverview = dynamic(
  () => import("@/features/overview/market-overview").then((mod) => mod.MarketOverview),
  {
    ssr: false,
    loading: () => (
      <div className="pageStack">
        <div className="sectionHeading">
          <div className="sectionKicker">Overview</div>
          <h1 className="sectionTitle">Market candles</h1>
          <p className="sectionDescription">
            Rendering shell. Candle data will load in the background.
          </p>
        </div>
        <div className="panel">
          <div className="panelHeader" style={{ alignItems: "flex-start" }}>
            <div>
              <h3>BTC candlestick view</h3>
              <span style={{ fontSize: 12, color: "var(--text-dim)" }}>
                Waiting for the interactive chart module
              </span>
            </div>
          </div>
          <div className="chartEmpty">
            <p className="eyebrow">Loading market module…</p>
          </div>
        </div>
      </div>
    ),
  },
);

export function MarketOverviewShell() {
  return <MarketOverview />;
}
