/**
 * Header Component
 * @description Global top header with logo, notifications, theme toggle, and profile
 */

import { useState } from 'react';
import { Bell, Moon, Sun, ChevronDown } from 'lucide-react';

/**
 * Header component
 * @description Top navigation header with logo and user actions
 * @returns Header element
 */
export function Header() {
    const [theme, setTheme] = useState<'light' | 'dark'>('light');

    return (
        <header className="fixed top-0 mt-[24px] mb-[16px] left-0 right-0 h-16 z-[100] backdrop-blur-md flex items-center justify-between px-8">
            {/* Logo */}
            <div className="flex items-center">
                <img
                    src="/Logo.png"
                    alt="AgenticIQ Logo"
                    width={168}
                    height={60}
                    className="object-contain"
                />
            </div>

            {/* Right Actions */}
            <div className="bg-white rounded-[20px] p-2 flex items-center gap-2 shadow-sm border border-gray-100/50">
                {/* Bell Notification */}
                <button className="p-2.5 bg-[#F4F9FF] hover:bg-[#E9F3FF] rounded-xl transition-all duration-200">
                    <Bell className="w-5 h-5 text-[#1A1A1A]" strokeWidth={1.5} />
                </button>

                {/* Theme Toggles */}
                <div className="flex items-center gap-1.5 px-1">
                    <button
                        onClick={() => setTheme('light')}
                        className={`p-2.5 rounded-full transition-all duration-300 ${
                            theme === 'light'
                                ? 'bg-[#0033FF] text-white shadow-lg shadow-blue-500/40 scale-105'
                                : 'bg-[#F4F9FF] text-gray-500 hover:text-gray-700'
                        }`}
                    >
                        <Sun className="w-5 h-5" strokeWidth={theme === 'light' ? 2 : 1.5} />
                    </button>
                    <button
                        onClick={() => setTheme('dark')}
                        className={`p-2.5 rounded-full transition-all duration-300 ${
                            theme === 'dark'
                                ? 'bg-[#0052FF] text-white shadow-lg shadow-blue-500/40 scale-105'
                                : 'bg-[#F4F9FF] text-gray-500 hover:text-gray-700'
                        }`}
                    >
                        <Moon className="w-5 h-5" strokeWidth={theme === 'dark' ? 2 : 1.5} />
                    </button>
                </div>

                {/* Profile Section */}
                <div className="flex items-center gap-2 pl-1 pr-2">
                    <div className="w-10 h-10 rounded-full overflow-hidden border-2 border-white shadow-sm ring-1 ring-gray-100">
                        <img
                            src="/profile.svg"
                            alt="User Avatar"
                            className="w-full h-full"
                        />
                    </div>
                    <ChevronDown className="w-4 h-4 text-gray-900" strokeWidth={2.5} />
                </div>
            </div>
        </header>
    );
}

