import React, { useState } from 'react';
import PropTypes from 'prop-types';

type PromptBoxProps = {
  onSubmit: (message: string) => void;
};

const PromptBox: React.FC<PromptBoxProps> = ({ onSubmit }) => {
  const [promptMessage, setPromptMessage] = useState<string>('');

  const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (promptMessage.trim()) {
      onSubmit(promptMessage);
      setPromptMessage('');
    }
  };

  return (
    <div className='p-4 text-white bg-gray-600' style={{ height: '6rem' }}>
      <form onSubmit={handleFormSubmit} className='flex items-center space-x-2'>
        <input
          type='text'
          value={promptMessage}
          onChange={(e) => setPromptMessage(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === 'Enter') {
              // set up typing
              handleFormSubmit(e as unknown as React.FormEvent<HTMLFormElement>); // Trigger submit on Enter
            }
          }}
          className='flex-grow p-2 text-black rounded'
          placeholder='Enter your message...'
        />
        <button type='submit' className='p-4 text-white rounded bg-accent'>
          Send
        </button>
      </form>
    </div>
  );
};

PromptBox.propTypes = {
  onSubmit: PropTypes.func.isRequired,
};

export default PromptBox;
