import classNames from 'classnames';

type TextControlProps = {
  className?: string;
  inputClassName?: string;
  defaultValue: any;
  children?: React.ReactNode;
  onChange?: (value: string) => void;
  onClick?: () => void;
  readOnly?: boolean;
};

export const TextControl = ({
  onClick,
  onChange,
  className,
  defaultValue,
  children,
  inputClassName,
  readOnly,
}: TextControlProps) => {
  return (
    <div
      className={classNames('flex items-center justify-center p-0', className)}
    >
      <input
        type="text"
        className={classNames(
          'border-primary !m-0 !mb-0 h-[32px] !rounded-none border border-opacity-70 focus:outline-none focus:ring-0',
          inputClassName
        )}
        value={defaultValue}
        onFocus={() => onClick && onClick()}
        onBlur={() => onClick && onClick()}
        onChange={(e) => onChange && onChange(e.target.value)}
        readOnly={readOnly}
      />
      <span>{children}</span>
    </div>
  );
};