'use client';

import dynamic from 'next/dynamic';
import type { UnifiedChartSpec } from '@ftb/shared';
import { toEChartsOption } from '@/lib/analysis-chart-renderer';

const ReactECharts = dynamic(() => import('echarts-for-react'), { ssr: false });

export function AnalysisChart({ spec }: { spec: UnifiedChartSpec }) {
  return (
    <div className="min-h-[260px] rounded-[28px] border border-white/60 bg-white/75 p-4 shadow-[0_18px_60px_rgba(15,23,42,0.08)] backdrop-blur-xl">
      <div className="mb-3">
        <h3 className="text-[14px] font-semibold text-[#111827]">{spec.title}</h3>
        {spec.subtitle && <p className="mt-1 text-[12px] text-[#64748b]">{spec.subtitle}</p>}
      </div>
      <ReactECharts option={toEChartsOption(spec)} style={{ height: 240, width: '100%' }} notMerge lazyUpdate />
    </div>
  );
}