// TradingViewSymbolInfo.tsx
import React, { useEffect, useRef, memo } from "react";

const TradingViewSymbolInfo: React.FC = () => {
  const container = useRef<HTMLDivElement>(null);

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

    // Проверяем, чтобы не дублировать скрипт
    if (container.current.querySelector("script")) {
      return;
    }

    const script = document.createElement("script");
    script.src =
      "https://s3.tradingview.com/external-embedding/embed-widget-symbol-info.js";
    script.type = "text/javascript";
    script.async = true;
    script.innerHTML = `
      {
        "symbol": "NASDAQ:FRHC",
        "colorTheme": "light",
        "isTransparent": false,
        "locale": "en",
        "width": "100%"
      }`;

    container.current.appendChild(script);

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

  return (
    <div className="tradingview-widget-container" ref={container}>
      <div className="tradingview-widget-container__widget"></div>
    </div>
  );
};

export default memo(TradingViewSymbolInfo);
