/**
 * 모바일 차트 화면 하단 고정 도크 — 종목·매매·호가·그리기·차트 도구
 */
import React from 'react';

export type MobileDockPanel = 'none' | 'market' | 'trade' | 'orderbook';

interface Props {
  marketOpen: boolean;
  rightOpen: boolean;
  rightTab: 'trade' | 'orderbook';
  drawingTool: string;
  onToggleMarket: () => void;
  onOpenTrade: () => void;
  onOpenOrderbook: () => void;
  onClosePanels: () => void;
  onTool: (tool: string) => void;
}

const MobileChartDock: React.FC<Props> = ({
  marketOpen,
  rightOpen,
  rightTab,
  drawingTool,
  onToggleMarket,
  onOpenTrade,
  onOpenOrderbook,
  onClosePanels,
  onTool,
}) => {
  const tradeActive = rightOpen && rightTab === 'trade';
  const obActive = rightOpen && rightTab === 'orderbook';

  return (
    <nav className="mobile-chart-dock" aria-label="차트 모바일 메뉴">
      <button
        type="button"
        className={`mcd-btn${marketOpen ? ' active' : ''}`}
        onClick={onToggleMarket}
        aria-pressed={marketOpen}
      >
        <span className="mcd-icon" aria-hidden>📋</span>
        <span className="mcd-label">종목</span>
      </button>
      <button
        type="button"
        className={`mcd-btn${tradeActive ? ' active' : ''}`}
        onClick={onOpenTrade}
        aria-pressed={tradeActive}
      >
        <span className="mcd-icon" aria-hidden>💰</span>
        <span className="mcd-label">매매</span>
      </button>
      <button
        type="button"
        className={`mcd-btn${obActive ? ' active' : ''}`}
        onClick={onOpenOrderbook}
        aria-pressed={obActive}
      >
        <span className="mcd-icon" aria-hidden>📊</span>
        <span className="mcd-label">호가</span>
      </button>
      <button
        type="button"
        className={`mcd-btn${drawingTool === 'zoom' ? ' active' : ''}`}
        onClick={() => {
          onClosePanels();
          onTool(drawingTool === 'zoom' ? 'cursor' : 'zoom');
        }}
        aria-pressed={drawingTool === 'zoom'}
        title="영역 드래그로 차트 확대"
      >
        <span className="mcd-icon" aria-hidden>🔍</span>
        <span className="mcd-label">확대</span>
      </button>
      <button
        type="button"
        className={`mcd-btn${drawingTool === 'cursor' ? ' active' : ''}`}
        onClick={() => {
          onClosePanels();
          onTool('cursor');
        }}
        aria-pressed={drawingTool === 'cursor'}
      >
        <span className="mcd-icon" aria-hidden>👆</span>
        <span className="mcd-label">이동</span>
      </button>
    </nav>
  );
};

export default MobileChartDock;