<script lang="tsx">
import { defineComponent, type PropType } from 'vue'
import { RangeNumberFilter } from '../Filters'
import NumberRange from '../../number-range/NumberRange.vue'

export default defineComponent({
  props: {
    filter: {
      type: Object as PropType<RangeNumberFilter>,
      required: true,
    },
  },
  setup(props) {
    return () => (
      <NumberRange
        modelValue={{ from: props.filter.from, to: props.filter.to }}
        addValue={(value) => props.filter.addValue(value)}
        label={props.filter.label}
        appearance='form'
      />
    )
  },
})
</script>
