import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { Spinner } from 'reactstrap';

/**
 * JKChatUploadProgress - Upload progress indicator for chat window
 *
 * Displays a temporary "Uploading [filename]..." message with spinner
 * while a file attachment is being uploaded. Styled as a system message.
 *
 * Props:
 * - fileName: Name of the file being uploaded
 */
const JKChatUploadProgress = memo(({ fileName }) => {
  return (
    <div
      style={{
        padding: '8px 12px',
        margin: '8px 0',
        backgroundColor: '#f0f0f0',
        borderRadius: '8px',
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        color: '#666',
        fontSize: '14px',
        fontStyle: 'italic'
      }}
    >
      <Spinner size="sm" color="secondary" />
      <span>Uploading {fileName}...</span>
    </div>
  );
});

JKChatUploadProgress.propTypes = {
  fileName: PropTypes.string.isRequired
};

JKChatUploadProgress.displayName = 'JKChatUploadProgress';

export default JKChatUploadProgress;
