// Header component with title, reset button, and connection status

import React from 'react';

interface HeaderProps {
  isConnected: boolean;
  onResetStats: () => void;
}

export const Header: React.FC<HeaderProps> = ({ isConnected, onResetStats }) => {
  return (
    <header className="header">
      <div className="header-left">
        <div className="logo">⚡</div>
        <h1 className="title">CLAUDE CODE MONITOR</h1>
      </div>
      <div className="header-right">
        <button className="reset-button" onClick={onResetStats}>
          🗑️ RESET STATS
        </button>
        <div className={`connection-status ${isConnected ? 'connected' : 'disconnected'}`}>
          <span className="status-dot"></span>
          <span className="status-text">{isConnected ? 'CONNECTED' : 'DISCONNECTED'}</span>
        </div>
      </div>
    </header>
  );
};

export default Header;
