---

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

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

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

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

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

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

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





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

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

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

export const SelectField = memo(function SelectField({
  label,
  initialValue,
  options,
  onValueChange,
}: SelectFieldProps) {
  const [value, setValue] = useState(initialValue);

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

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



[data-theme='mxt'],
[data-theme='mb'][data-mode='light'] {
  --dd-item-text-selected: var(--neutral-2);
  --dd-item-bg-selected: var(--neutral-12);
}

[data-theme='tr'],
[data-theme='mb'][data-mode='dark'] {
  --dd-item-text-selected: var(--neutral-13);
  --dd-item-bg-selected: var(--neutral-5);
}

.input {
  color: var(--neutral-12);

  input {
    color: var(--neutral-12);
  }
}

.dropdown {
  li {
    &[aria-selected='true'] {
      background-color: var(--dd-item-bg-selected);

      div[aria-label='Label'] {
        color: var(--dd-item-text-selected);
      }
    }

    svg {
      color: transparent;
    }
  }
}

.inputWrapper {
  &:focus-within {
    background-color: transparent !important;
  }

  div {
    background-color: transparent;

    &:focus-within {
      background-color: transparent !important;
    }

    .input {
      background-color: transparent;
    }
  }
}