"use client";

import { useEffect, useRef } from "react";

interface UsdEurWidgetProps {
  height?: number;
}

const WIDGET_CONFIG = {
  symbol: "FX:EURUSD",
  width: "100%",
  locale: "en",
  dateRange: "1Y",
  colorTheme: "light",
  isTransparent: false,
  autosize: true,
  largeChartUrl: "",
};

export function UsdEurWidget({ height = 260 }: UsdEurWidgetProps) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    container.innerHTML = "";

    const widgetDiv = document.createElement("div");
    widgetDiv.className = "tradingview-widget-container__widget";
    widgetDiv.style.height = `${height}px`;
    widgetDiv.style.width = "100%";
    container.appendChild(widgetDiv);

    const script = document.createElement("script");
    script.src =
      "https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js";
    script.async = true;
    script.type = "text/javascript";
    script.innerHTML = JSON.stringify(WIDGET_CONFIG);
    container.appendChild(script);

    return () => {
      container.innerHTML = "";
    };
  }, [height]);

  return (
    <div
      className="h-full w-full overflow-hidden rounded-xl border border-slate-100 bg-white"
      style={{ minHeight: height }}
    >
      <div ref={containerRef} className="tradingview-widget-container w-full" />
    </div>
  );
}