import React from 'react';
import { Spinner } from 'reactstrap';

/**
 * JKChatLoadingSpinner - Loading state component for chat
 *
 * Displays a spinner with "Loading messages..." text while fetching chat history.
 * Used when fetchStatus is 'loading'.
 */
const JKChatLoadingSpinner = () => {
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '48px 24px',
      color: '#6c757d'
    }}>
      <Spinner color="primary" />
      <p style={{ marginTop: '16px', fontSize: '14px' }}>Loading messages...</p>
    </div>
  );
};

export default JKChatLoadingSpinner;
