import React from "react";
import { SelectRuleBlock } from "../../RuleBlocks";

import { comparatorOptions } from "../../../constants/segments/comparators";

import { SegmentAttributeComparator } from "@komi-app/fans-sdk";
import { SelectOption } from "../../../types/select";

export interface ComparatorBlockProps {
  value?: SegmentAttributeComparator;
  onValueChange: (value: SegmentAttributeComparator) => void;
};
export const ComparatorBlock: React.FC<ComparatorBlockProps> = ({
  value = SegmentAttributeComparator.Eq,
  onValueChange,
}) => {
  const handleComparatorChange = ([comparator]: SelectOption<SegmentAttributeComparator>[]) => {
    onValueChange(comparator.value);
  };

  return (
    <SelectRuleBlock<SegmentAttributeComparator>
      selectedValues={value}
      options={comparatorOptions}
      onOptionSelectionChange={handleComparatorChange}
    />
  );
};
