import { useImperativeHandle, useRef, type Ref } from 'react';

export type CustomRef = {
  getUCValue: () => string;
};

type Props = {
  label: string;
  ref: Ref<CustomRef>;
};

const Input: React.FC<Props> = ({ label, ref }) => {
  const inputRef = useRef<HTMLInputElement>(null);
  useImperativeHandle(ref, () => ({
    getUCValue() {
      if (!inputRef.current) {
        return '';
      }
      return inputRef.current.value.toUpperCase();
    },
  }));

  return (
    <div>
      <label>{label}</label>
      <input type="text" ref={inputRef} />
    </div>
  );
};

export default Input;
