import React from 'react';
import { useChat } from '../../providers/chat-provider';
import '../../styles/chat.css';

export function ChatHeader() {
  const { instance } = useChat();

  return (
    <div className="chat-header">
      <div className="header-content">
        <h2 className="header-title">
          {instance?.name || 'Chat'}
        </h2>
        <span className="header-subtitle">Online</span>
      </div>
      
      <button className="header-button">
        <svg className="icon" viewBox="0 0 24 24">
          <path d="M12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm14 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
        </svg>
      </button>
    </div>
  );
}