'use client'

import {Button} from '@/components/ui/button'
import {Menu} from 'lucide-react'
import Link from 'next/link'
import {useScrollTarget} from '@/hooks/useScrollTarget'

type NavItem = {
    label: string
    scrollTo?: string
    href?: string
}

export default function Navbar() {
    const {handleSectionClick} = useScrollTarget()

    const navItems: NavItem[] = [
        {label: 'Leistungen', scrollTo: 'leistungen'},
        // { label: 'Spezialisierung', scrollTo: 'specialities' },
        {label: 'Über mich', scrollTo: 'about'},
        {label: 'Kontakt', href: '/kontakt'},
    ]

    const handleClick = (item: NavItem) => {
        if (item.scrollTo) {
            handleSectionClick(item.scrollTo)
        } else if (item.href) {
            window.location.href = item.href
        }
    }

    const handleLogoClick = () => {
        if (window.location.pathname === '/') {
            window.scrollTo({top: 0, behavior: 'smooth'})
        } else {
            localStorage.setItem('scrollTarget', 'top')
            window.location.href = '/'
        }
    }

    return (
        <nav className="flex items-center justify-between px-6 py-4 border-b sticky top-0 bg-white z-50 shadow-sm">
            <button
                onClick={handleLogoClick}
                className="text-xl font-bold hover:underline"
            >
                Steuerkanzlei
            </button>

            <div className="hidden md:flex items-center gap-6 text-sm">
                {navItems.map((item) => (
                    <button
                        key={item.label}
                        onClick={() => handleClick(item)}
                        className="hover:underline"
                    >
                        {item.label}
                    </button>
                ))}

                <Link href="/kontakt">
                    <Button size="sm">Jetzt Termin sichern</Button>
                </Link>
            </div>

            <div className="md:hidden">
                <Menu/>
            </div>
        </nav>
    )
}