---

import { Select } from 'exchange-elements/v2';
import { memo, useEffect, useState } from 'react';

import styles from './index.module.scss';

interface SelectFieldProps {
  label?: string;
  value?: string;
  initialValue?: string;
  options: { label: string; value: string }[];
  onValueChange: (value: string) => void;
}

export const SelectField = memo(({ label, value, initialValue, options, onValueChange }: SelectFieldProps) => {
  const [localValue, setLocalValue] = useState(initialValue ?? value ?? '');

  useEffect(() => {
    if (value !== undefined) {
      setLocalValue(value);
    }
  }, [value]);

  const handleChange = (nextValue: string) => {
    setLocalValue(nextValue);
    onValueChange(nextValue);
  };

  return (
    <Select
      classNames={{
        dropdown: styles.dropdown,
        input: styles.inputWrapper,
      }}
      inputClassNames={styles.input}
      value={localValue}
      onChange={handleChange}
      options={options}
      label={label}
      labelPos="top"
      size="sm"
    />
  );
});





import { InputText } from 'exchange-elements/v2';
import { ChangeEvent, memo, useState } from 'react';

import styles from './index.module.scss';

interface TextFieldProps {
  label: string;
  initialValue: string;
  onValueChange: (value: string) => void;
  normalizeValue?: (value: string) => string;
}

export const TextField = memo(({ label, initialValue, onValueChange, normalizeValue }: TextFieldProps) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    const rawValue = event.currentTarget.value;
    const nextValue = normalizeValue ? normalizeValue(rawValue) : rawValue;

    setValue(nextValue);
    onValueChange(nextValue);
  };

  return (
    <InputText
      className={styles.input}
      value={value}
      onChange={handleChange}
      label={label}
      labelPos="top"
      size="sm"
    />
  );
});