import React from 'react';
import { LayoutDashboard, Users, Map, Settings, Signal } from 'lucide-react';

const Sidebar = () => {
    const navItems = [
        { icon: LayoutDashboard, label: 'Dashboard', active: true },
        { icon: Users, label: 'Subscribers' },
        { icon: Map, label: 'Geo Map' },
        { icon: Settings, label: 'Settings' },
    ];

    return (
        <aside className="glass-panel" style={{
            width: '260px',
            margin: 'var(--space-md)',
            marginRight: 0,
            display: 'flex',
            flexDirection: 'column',
            padding: 'var(--space-lg)'
        }}>
            <div className="flex-center" style={{ marginBottom: 'var(--space-xl)', justifyContent: 'flex-start', gap: 'var(--space-sm)' }}>
                <div style={{ color: 'var(--primary)', filter: 'drop-shadow(0 0 5px var(--primary-glow))' }}>
                    <Signal size={32} />
                </div>
                <div>
                    <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', lineHeight: 1 }}>GlobeSIM</h2>
                    <span style={{ fontSize: '0.75rem', color: 'var(--text-muted)', letterSpacing: '2px' }}>MONITOR</span>
                </div>
            </div>

            <nav style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 'var(--space-sm)' }}>
                {navItems.map((item, index) => (
                    <button
                        key={index}
                        style={{
                            display: 'flex',
                            alignItems: 'center',
                            gap: 'var(--space-md)',
                            background: item.active ? 'linear-gradient(90deg, rgba(0, 240, 255, 0.1), transparent)' : 'transparent',
                            border: 'none',
                            borderLeft: item.active ? '3px solid var(--primary)' : '3px solid transparent',
                            padding: 'var(--space-md)',
                            color: item.active ? 'var(--primary)' : 'var(--text-muted)',
                            cursor: 'pointer',
                            textAlign: 'left',
                            transition: 'all 0.3s ease',
                            borderRadius: '0 8px 8px 0'
                        }}
                    >
                        <item.icon size={20} />
                        <span style={{ fontWeight: item.active ? 600 : 400 }}>{item.label}</span>
                    </button>
                ))}
            </nav>

            <div style={{ marginTop: 'auto', paddingTop: 'var(--space-md)', borderTop: '1px solid var(--border-color)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)' }}>
                    <div style={{ width: '36px', height: '36px', borderRadius: '50%', background: 'var(--bg-panel-hover)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <span style={{ fontWeight: 'bold', color: 'var(--primary)' }}>A</span>
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                        <span style={{ fontSize: '0.875rem' }}>Admin User</span>
                        <span style={{ fontSize: '0.75rem', color: 'var(--status-online)' }}>● Online</span>
                    </div>
                </div>
            </div>
        </aside>
    );
};

export default Sidebar;