"use client";

import { TradingViewEmbed } from "./TradingViewEmbed";

const SCRIPT = "https://s3.tradingview.com/external-embedding/embed-widget-market-quotes.js";

const CONFIG = {
  showSymbolLogo: true,
  isTransparent: true,
  colorTheme: "light",
  locale: "en",
  symbolsGroups: [
    {
      name: "Indices",
      originalName: "Indices",
      symbols: [
        { name: "FOREXCOM:SPXUSD", displayName: "S&P 500" },
        { name: "FOREXCOM:NSXUSD", displayName: "Nasdaq 100" },
        { name: "FOREXCOM:DJI",    displayName: "Dow Jones" },
        { name: "INDEX:DEU40",     displayName: "DAX" },
      ],
    },
    {
      name: "Forex",
      originalName: "Forex",
      symbols: [
        { name: "FX:EURUSD", displayName: "EUR/USD" },
        { name: "FX:GBPUSD", displayName: "GBP/USD" },
        { name: "FX:USDJPY", displayName: "USD/JPY" },
        { name: "FX:AUDUSD", displayName: "AUD/USD" },
      ],
    },
    {
      name: "Commodities",
      originalName: "Commodities",
      symbols: [
        { name: "COMEX:GC1!", displayName: "Gold" },
        { name: "NYMEX:CL1!", displayName: "Crude Oil" },
      ],
    },
  ],
};

export function WatchlistWidget({ height = 280 }: { height?: number }) {
  return <TradingViewEmbed scriptSrc={SCRIPT} config={CONFIG} height={height} />;
}