/**
 * 보조지표 설정 — 가시성 탭
 */
import React from 'react';
import type { Timeframe } from '../types';
import { SettingsOutputFooter } from './IndicatorSettingsSections';

export interface IndicatorSettingsVisibilitySectionProps {
  hidden: boolean;
  onHidden: (v: boolean) => void;
  lastValueVisible: boolean;
  onLastValueVisible: (v: boolean) => void;
  timeframeVis: Partial<Record<Timeframe, boolean>>;
  onTimeframeVis: (tf: Timeframe, v: boolean) => void;
  timeframes: { tf: Timeframe; label: string }[];
}

const IndicatorSettingsVisibilitySection: React.FC<IndicatorSettingsVisibilitySectionProps> = ({
  hidden,
  onHidden,
  lastValueVisible,
  onLastValueVisible,
  timeframeVis,
  onTimeframeVis,
  timeframes,
}) => (
  <div className="ism-section ism-visibility-tab-section">
    <div className="ism-row">
      <span className="ism-label">차트에 표시</span>
      <div className="ism-control">
        <label className="ism-toggle">
          <input
            type="checkbox"
            checked={!hidden}
            onChange={e => onHidden(!e.target.checked)}
          />
          <span className="ism-toggle-slider" />
        </label>
      </div>
    </div>
    <SettingsOutputFooter
      lastValueVisible={lastValueVisible}
      onLastValueVisible={onLastValueVisible}
      timeframeVis={timeframeVis}
      onTimeframeVis={onTimeframeVis}
      timeframes={timeframes}
    />
  </div>
);

export default IndicatorSettingsVisibilitySection;