import React from 'react';
import PropTypes from 'prop-types';

/**
 * JKChatHeader - Header component for chat window
 *
 * Displays channel name and close button in the chat window header.
 * Uses inline styles (SCSS styling deferred to Plan 8.3).
 *
 * @param {Object} props - Component props
 * @param {string} props.channelName - Channel name to display
 * @param {Function} props.onClose - Callback when close button is clicked
 */
const JKChatHeader = ({ channelName, onClose }) => {
  return (
    <div style={{
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: '12px 16px',
      borderBottom: '1px solid #e0e0e0',
      backgroundColor: '#f8f9fa'
    }}>
      <h5 id="chat-window-title" style={{ margin: 0, fontSize: '16px', fontWeight: 600 }}>
        {channelName || 'Session Chat'}
      </h5>
      <button
        onClick={onClose}
        style={{
          background: 'transparent',
          border: 'none',
          fontSize: '20px',
          cursor: 'pointer',
          padding: '0 8px',
          color: '#6c757d'
        }}
        aria-label="Close chat"
      >
        ×
      </button>
    </div>
  );
};

JKChatHeader.propTypes = {
  channelName: PropTypes.string,
  onClose: PropTypes.func.isRequired
};

JKChatHeader.defaultProps = {
  channelName: null
};

export default JKChatHeader;
