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

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

/**
 * Header component
 * @description Top navigation header with logo and user actions
 * @returns Header element
 */
export function Header() {
    return (
        <header className="sticky top-0 z-[100] flex items-center justify-between px-4 py-4 md:px-6 lg:px-10 lg:pt-6 bg-gradient-to-r from-[#C8FAFF] via-[#E4F2FF] to-[#C6D7FE]">
            <div className="flex items-end gap-2">
                <img
                    src="/Logo.png"
                    alt="AgenticIQ Logo"
                    width={160}
                    height={54}
                    className="object-contain w-24 h-auto md:w-32 lg:w-40"
                />
            </div>

            <div className="flex items-center gap-2 md:gap-3 rounded-xl md:rounded-2xl border border-[#E6EAF5] bg-white px-2 py-1.5 md:px-3 md:py-2 shadow-sm">
                <button className="flex h-11 w-11 md:h-10 md:w-10 items-center justify-center rounded-full border border-[#E6EAF5] bg-white text-[#1A1A1A] transition hover:bg-[#F4F7FF] min-h-[44px] min-w-[44px]">
                    <Bell className="h-4 w-4 md:h-5 md:w-5" strokeWidth={1.6} />
                </button>
                <button className="flex h-11 w-11 md:h-10 md:w-10 items-center justify-center rounded-full bg-[#0A4BFF] text-white shadow-md shadow-blue-500/30 transition hover:bg-[#0033FF] min-h-[44px] min-w-[44px]">
                    <Sun className="h-4 w-4 md:h-5 md:w-5" strokeWidth={1.6} />
                </button>
                <button className="hidden md:flex h-10 w-10 items-center justify-center rounded-full border border-[#E6EAF5] bg-white text-[#1A1A1A] transition hover:bg-[#F4F7FF]">
                    <Moon className="h-5 w-5" strokeWidth={1.6} />
                </button>
                <div className="flex items-center gap-1.5 md:gap-2 pl-0.5 md:pl-1 pr-1 md:pr-2">
                    <div className="h-9 w-9 md:h-10 md:w-10 overflow-hidden rounded-full border-2 border-white shadow-sm ring-1 ring-gray-100">
                        <img
                            src="/profile.svg"
                            alt="User Avatar"
                            className="h-full w-full"
                        />
                    </div>
                    <ChevronDown className="h-3.5 w-3.5 md:h-4 md:w-4 text-gray-900" strokeWidth={2.5} />
                </div>
            </div>
        </header>
    );
}

