"use client";

import Link from "next/link";
import {useState} from "react";
import {
    NavigationMenu,
    NavigationMenuItem,
    NavigationMenuLink,
    NavigationMenuList,
} from "@/components/ui/navigation-menu";
import {Sheet, SheetContent, SheetTrigger} from "@/components/ui/sheet";
import {Button} from "@/components/ui/button";
import {Menu} from "lucide-react";

export default function Navbar() {
    const [open, setOpen] = useState(false);

    const navItems = [
        {href: "/", label: "Start"},
        {href: "/about", label: "Über mich"},
        {href: "/kontakt", label: "Kontakt"},
    ];

    return (
        <header className="w-full border-b bg-white dark:bg-gray-950 px-4 py-3 shadow-sm">
            <div className="max-w-6xl mx-auto flex justify-between items-center">
        <span className="text-xl font-bold text-gray-900 dark:text-white">
          RA Mustermann
        </span>

                {/* Desktop Navigation */}
                <nav className="hidden md:flex">
                    <NavigationMenu>
                        <NavigationMenuList className="gap-4">
                            {navItems.map((item) => (
                                <NavigationMenuItem key={item.href}>
                                    <NavigationMenuLink asChild>
                                        <Link
                                            href={item.href}
                                            className="text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-primary"
                                        >
                                            {item.label}
                                        </Link>
                                    </NavigationMenuLink>
                                </NavigationMenuItem>
                            ))}
                        </NavigationMenuList>
                    </NavigationMenu>
                </nav>

                {/* Mobile Navigation */}
                <div className="md:hidden">
                    <Sheet open={open} onOpenChange={setOpen}>
                        <SheetTrigger asChild>
                            <Button variant="ghost" size="icon" aria-label="Menü öffnen">
                                <Menu className="h-6 w-6 text-gray-800 dark:text-gray-200"/>
                            </Button>
                        </SheetTrigger>
                        <SheetContent side="right" className="w-[260px] pt-10 px-6">
                            <h2 className="text-lg font-semibold tracking-tight mb-6">
                                Menü
                            </h2>
                            <nav className="flex flex-col gap-4">
                                {navItems.map((item) => (
                                    <Link
                                        key={item.href}
                                        href={item.href}
                                        onClick={() => setOpen(false)}
                                        className="block px-4 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                                    >
                                        {item.label}
                                    </Link>
                                ))}
                            </nav>
                        </SheetContent>
                    </Sheet>
                </div>
            </div>
        </header>
    );
}