/**
 * AND / OR 논리 게이트 — 서로 전환
 */
import React from 'react';
import type { LogicNodeType } from '../../utils/strategyTypes';

export type LogicGateOp = Extract<LogicNodeType, 'AND' | 'OR'>;

interface Props {
  value: LogicGateOp;
  onChange: (op: LogicGateOp) => void;
  className?: string;
  compact?: boolean;
}

const LogicGateOpToggle: React.FC<Props> = ({ value, onChange, className = '', compact = false }) => {
  const stop = (e: React.SyntheticEvent) => e.stopPropagation();

  return (
    <div
      className={`se-logic-gate-toggle${compact ? ' se-logic-gate-toggle--compact' : ''}${className ? ` ${className}` : ''}`}
      role="group"
      aria-label="논리 연산"
      onPointerDown={stop}
      onMouseDown={stop}
      onClick={stop}
    >
      <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>
  );
};

export default LogicGateOpToggle;