import React from 'react';
import { VirtualScroll } from '../../components/common/VirtualScroll';
import { useWidgetDashboard } from '../WidgetDashboardContext';

/** 전략 목록 — API 로드된 strategies 재사용 */
const StrategyListWidgetHost: React.FC = () => {
  const { strategies, selectedStrategyId, setSelectedStrategyId } = useWidgetDashboard();

  if (strategies.length === 0) {
    return <p className="wd-widget-empty">등록된 전략이 없습니다.</p>;
  }

  return (
    <div className="wd-widget-host wd-widget-host--strategy-list">
      <VirtualScroll
        className="wd-strategy-scroll vl-scroll"
        items={strategies}
        estimateSize={44}
        overscan={5}
        getItemKey={s => String(s.id)}
        innerClassName="vl-scroll-inner wd-strategy-list"
        aria-label="전략 목록"
      >
        {s => (
          <button
            type="button"
            className={`wd-strategy-item${selectedStrategyId === s.id ? ' wd-strategy-item--on' : ''}`}
            onClick={() => setSelectedStrategyId(s.id ?? null)}
          >
            <span className="wd-strategy-item-name">{s.name}</span>
            {s.description && (
              <span className="wd-strategy-item-desc">{s.description}</span>
            )}
          </button>
        )}
      </VirtualScroll>
    </div>
  );
};

export default StrategyListWidgetHost;