'use client';

import React from 'react';
import { useScrollNavigation } from '@/hooks/useScrollNavigation';
import { NavLogo } from './NavLogo';
import { DesktopNav } from './DesktopNav';
import { MobileNav } from './MobileNav';

const Navbar = () => {
    const { handleNavClick } = useScrollNavigation();

    return (
        <div className="w-full px-4 sm:px-6 lg:px-8 flex justify-center mt-4 z-50 fixed">
            <header className="bg-background/50 backdrop-blur-md border shadow-lg rounded-xl w-full max-w-screen-xl py-3 px-4 sm:px-6 lg:px-8">
                <div className="flex items-center justify-between">
                    <NavLogo onLogoClick={() => handleNavClick('start')} />
                    <DesktopNav onNavClick={handleNavClick} />
                    <MobileNav onNavClick={handleNavClick} />
                </div>
            </header>
        </div>
    );
};

export default Navbar;