class HeaderSection extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.render();
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                .header {
                    background: white;
                    border-bottom: 1px solid #e5e7eb;
                }
                
                .search-input {
                    background-color: #f9fafb;
                    transition: all 0.3s ease;
                }
                
                .search-input:focus {
                    background-color: white;
                    border-color: #ff580f;
                }
                
                .notification-badge {
                    position: absolute;
                    top: -2px;
                    right: -2px;
                    width: 8px;
                    height: 8px;
                    background-color: #ff580f;
                    border-radius: 50%;
                }
            </style>
            
            <header class="header p-4">
                <div class="flex items-center justify-between">
                    <!-- Left Section -->
                    <div class="flex items-center space-x-4">
                        <!-- Mobile Menu Button -->
                        <button class="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors" data-mobile-menu>
                        <i data-feather="menu" class="w-5 h-5 text-gray-600"></i>
                    </button>
                    
                    <!-- Search Bar -->
                    <div class="relative hidden md:block">
                        <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"></i>
                    <input 
                        type="text" 
                        placeholder="Search repositories, agents..." 
                        class="search-input pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-secondary/20 focus:border-secondary w-64"
                        data-search-input
                    >
                </div>
            </div>
            
            <!-- Right Section -->
            <div class="flex items-center space-x-4">
                <!-- Notifications -->
                <div class="relative">
                    <button class="p-2 rounded-lg hover:bg-gray-100 transition-colors">
                        <i data-feather="bell" class="w-5 h-5 text-gray-600"></i>
                    <div class="notification-badge"></div>
                </button>
            </div>
            
            <!-- User Menu -->
            <div class="flex items-center space-x-3">
                <div class="text-right hidden md:block">
                    <p class="text-sm font-medium text-primary">DevOps Team</p>
                    <p class="text-xs text-gray-500">Administrator</p>
                </div>
                <div class="w-8 h-8 bg-secondary rounded-full flex items-center justify-center">
                    <i data-feather="user" class="w-4 h-4 text-white"></i>
            </div>
        </div>
    </div>
</header>
        `;
    }
}

customElements.define('header-section', HeaderSection);