import { RadioGroup } from '@headlessui/react';
import { __ } from '@wordpress/i18n';
const OperatorRadio = ({ value, onChange, fontSize = 'wmx-text-[9px]' }) => {
  return (
    <RadioGroup className='wmx-relative wmx-flex wmx-z-[2]' value={value} onChange={onChange}>
      <RadioGroup.Option value='and'>
        {({ checked }) => (
          <span
            className={` wmx-rounded-s wmx-cursor-pointer wmx-px-2.5 wmx-py-1 wmx-border wmx-border-r-0 wmx-border-gray-300 wmx-font-semibold wmx-select-none ${fontSize} ${
              checked ? 'wmx-border-primary wmx-bg-primary wmx-text-white' : 'wmx-bg-white'
            } `}
          >
            {__('AND', 'wmx')}
          </span>
        )}
      </RadioGroup.Option>
      <RadioGroup.Option value='or'>
        {({ checked }) => (
          <span
            className={` wmx-rounded-e wmx-cursor-pointer wmx-px-2 wmx-py-1 wmx-border wmx-border-l-0 wmx-border-gray-300 wmx-font-semibold wmx-select-none ${fontSize}  ${
              checked ? 'wmx-border-primary wmx-bg-primary wmx-text-white' : 'wmx-bg-white'
            } `}
          >
            {__('OR', 'wmx')}
          </span>
        )}
      </RadioGroup.Option>
    </RadioGroup>
  );
};
export default OperatorRadio;
