import React from 'react';
import type { StartCombineOp } from '../../utils/strategyStartNodes';

interface Props {
  value: StartCombineOp;
  onChange: (op: StartCombineOp) => void;
}

export default function StartCombineOpControl({ value, onChange }: Props) {
  return (
    <div className="se-start-combine" role="group" aria-label="START 간 연산">
      <span className="se-start-combine-label">START 간</span>
      <div className="se-start-combine-toggle">
        <button
          type="button"
          className={`se-start-combine-btn se-start-combine-btn--and${value === 'AND' ? ' se-start-combine-btn--on' : ''}`}
          aria-pressed={value === 'AND'}
          onClick={() => onChange('AND')}
        >
          AND
        </button>
        <button
          type="button"
          className={`se-start-combine-btn se-start-combine-btn--or${value === 'OR' ? ' se-start-combine-btn--on' : ''}`}
          aria-pressed={value === 'OR'}
          onClick={() => onChange('OR')}
        >
          OR
        </button>
      </div>
    </div>
  );
}
