import React from 'react';
import { Bell, Search, Activity } from 'lucide-react';

const Header = () => {
    return (
        <header style={{
            height: '80px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: '0 var(--space-md)',
            marginTop: 'var(--space-md)'
        }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-md)', flex: 1 }}>
                <div className="glass-panel" style={{
                    display: 'flex',
                    alignItems: 'center',
                    padding: 'var(--space-sm) var(--space-md)',
                    gap: 'var(--space-sm)',
                    width: '300px'
                }}>
                    <Search size={18} color="var(--text-muted)" />
                    <input
                        type="text"
                        placeholder="Search by IMSI, Number, or Location..."
                        style={{
                            background: 'transparent',
                            border: 'none',
                            color: 'var(--text-main)',
                            outline: 'none',
                            width: '100%'
                        }}
                    />
                </div>
            </div>

            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-lg)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)', color: 'var(--text-muted)', fontSize: '0.875rem' }}>
                    <Activity size={16} color="var(--status-online)" />
                    <span>Network Load: <strong style={{ color: 'var(--text-main)' }}>42%</strong></span>
                </div>

                <button style={{
                    background: 'transparent',
                    border: 'none',
                    color: 'var(--text-main)',
                    cursor: 'pointer',
                    position: 'relative'
                }}>
                    <Bell size={20} />
                    <span style={{
                        position: 'absolute',
                        top: -2,
                        right: -2,
                        width: '8px',
                        height: '8px',
                        background: 'var(--accent)',
                        borderRadius: '50%'
                    }} />
                </button>
            </div>
        </header>
    );
};

export default Header;