import React, { useState, ForwardedRef } from 'react';

interface InputProps {
  message: string;
  onSendClick: (message: string) => void;
  onMicClick: () => void;
}

const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
  ({ message, onSendClick, onMicClick }, ref: ForwardedRef<HTMLDivElement>) => {
    const [inputValue, setInputValue] = useState('');

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      setInputValue(e.target.value);
    };

    return (
      <div className="input" id="inputForm">
        <input
          type="text"
          name="user_message"
          placeholder="Type your message here..."
          value={inputValue}
          onChange={handleInputChange}
        />
        <button type="submit" onClick={() => onSendClick(inputValue)}>
          <img src="/img/send.svg" alt="send" />
        </button>
        <button type="submit" onClick={onMicClick}>
          <img src="/img/microphone.svg" alt="microphone" />
        </button>
      </div>
    );
  }
);

export default InputFrontend;