import React, { useState } from 'react';
import type { Theme, Timeframe } from '../../types';
import PaperMiniChart from './PaperMiniChart';
import PaperIndicatorPanel from './PaperIndicatorPanel';

interface Props {
  market: string;
  theme?: Theme;
}

/** 모의투자 중앙 — 상단 캔들 + 하단 보조지표 (실시간 차트 레이아웃) */
const PaperAnalysisChart: React.FC<Props> = ({ market, theme = 'dark' }) => {
  const [timeframe, setTimeframe] = useState<Timeframe>('1h');

  return (
    <div className="ptd-analysis-chart">
      <div className="ptd-main-pane">
        <PaperMiniChart
          market={market}
          theme={theme}
          timeframe={timeframe}
          onTimeframeChange={setTimeframe}
        />
      </div>
      <div className="ptd-sub-panes">
        <PaperIndicatorPanel market={market} timeframe={timeframe} stacked />
      </div>
    </div>
  );
};

export default PaperAnalysisChart;
