import {
  RtFormFieldNumber,
  RtFormFieldNumeric,
} from '@dpa/react-form-field-text';
import { RtText } from '@dpa/react-text';
import { useState } from 'react';

export function FormFieldNumberPage() {
  const [employees, setEmployees] = useState(null);
  const [egrn, setEgrn] = useState<null | string>(null);

  const handleChange = (e) => {
    setEmployees(e.value);
  };

  return (
    <div style={{ padding: '3em', display: 'grid', gap: '2em' }}>
      <RtText typography="symbol-lg-medium">{employees}</RtText>
      <RtFormFieldNumber
        label="Количество работников"
        size="lg"
        ui="ambulant-label"
        use="neutral"
        value={employees}
        min={5}
        max={10}
        onChange={handleChange}
      />

      <RtText typography="symbol-lg-medium">{egrn}</RtText>

      <RtFormFieldNumeric
        label="ЕГРН"
        size="lg"
        ui="ambulant-label"
        use="neutral"
        value={egrn}
        maxLength={10}
        onChange={({ value }) => setEgrn(value)}
      />
    </div>
  );
}