"use client"

import React, { useEffect, useRef, memo } from "react"

interface TradingViewWidgetProps {
  slug: string
}

const TradingViewWidget = ({ slug }: TradingViewWidgetProps) => {
  const containerRef = useRef<HTMLDivElement | null>(null)

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

    // Clear any previous widget
    container.innerHTML = ""

    const script = document.createElement("script")
    script.src = "https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js"
    script.type = "text/javascript"
    script.async = true

    script.innerHTML = JSON.stringify({
      width: "100%",      // ensure widget is full width
      height: "100%",
      symbol: `${slug.toUpperCase()}USD`,
      interval: "D",
      timezone: "Etc/UTC",
      theme: "dark",
      style: "1",
      locale: "en",
      withdateranges: true,
      allow_symbol_change: true,
      calendar: false,
      support_host: "https://www.tradingview.com",
    })

    container.appendChild(script)

    // Cleanup when component unmounts or slug changes
    return () => {
      container.innerHTML = ""
    }
  }, [slug])

  return (
    <div
      style={{
        width: "100%",       // full width
        height: "500px",
        borderRadius: "10px",
        overflow: "hidden",
        border: "1px solid #2B2B2B",
        boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2)",
        backgroundColor: "#121212",
        transition: "all 0.3s ease-in-out",
      }}
    >
      <div
        ref={containerRef}
        style={{
          width: "100%",
          height: "100%",
        }}
      />
    </div>
  )
}

export default memo(TradingViewWidget)