import { useEffect, useRef } from "react";
import * as LightweightCharts from "lightweight-charts";

interface TradingViewChartProps {
  ticker: string;
  data?: Array<{ time: string; open: number; high: number; low: number; close: number }>;
}

export default function TradingViewChart({ ticker, data }: TradingViewChartProps) {
  const containerRef = useRef<HTMLDivElement>(null);

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

    const chart = LightweightCharts.createChart(containerRef.current, {
      width: containerRef.current.clientWidth,
      height: 400,
    });

    const candlestickSeries = chart.addSeries(LightweightCharts.CandlestickSeries);
    
    if (data && data.length > 0) {
      candlestickSeries.setData(data);
    }

    return () => chart.remove();
  }, [data]);

  return (
    <div className="bg-white rounded-xl shadow-lg p-4">
      <h3 className="text-lg font-bold mb-3">{ticker} Price Chart</h3>
      <div ref={containerRef} />
    </div>
  );
}