import React from 'react';
import { Box, FormField, NumberInput } from '@wix/design-system';
import type { StringLengthRange } from '../../../types/SchemaConfig';
import { classes } from './CharactersLimitInput.st.css.js';

export interface CharactersLimitInputProps {
  minLabel: string;
  maxLabel: string;
  value: StringLengthRange;
  onChange: (v: StringLengthRange) => void;
}

export const CharactersLimitInput = ({
  minLabel,
  maxLabel,
  value,
  onChange,
}: CharactersLimitInputProps) => (
  <Box gap="SP3" width="100%">
    <Box className={classes.field}>
      <FormField stretchContent label={minLabel}>
        <NumberInput
          value={value.minLength}
          onChange={(v) => onChange({ ...value, minLength: v ?? undefined })}
          min={0}
        />
      </FormField>
    </Box>
    <Box className={classes.field}>
      <FormField stretchContent label={maxLabel}>
        <NumberInput
          value={value.maxLength}
          onChange={(v) => onChange({ ...value, maxLength: v ?? undefined })}
          min={0}
        />
      </FormField>
    </Box>
  </Box>
);