import React from 'react';

export type SetStateInputMethod<NameType> = (name: NameType, newValue: string) => void;

interface ISimpleInput<NameType> {
  inputData: {
    title: string;
    name: string;
  };
  className?: string;
  stateHanlder: {
    state: string;
    setState: SetStateInputMethod<NameType>;
  };
}

export default function SimpleInput<NameType>(props: ISimpleInput<NameType>) {
  const { className, inputData, stateHanlder } = props;
  const { name, title } = inputData;
  const { setState, state } = stateHanlder;

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value, name: inputName } = e.target;
    setState(inputName as NameType, value);
  };

  return (
    <div className={`flex flex-col ${className}`}>
      <label className='mb-1 text-txt-second text-xs' htmlFor={title}>
        {title}
      </label>
      <input
        value={state}
        onChange={handleInputChange}
        name={name}
        className='bg-bg-gray h-11 rounded-lg focus:outline-0 px-2 text-txt-medium w-full'
        id={title}
      />
    </div>
  );
}