'use client';

import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { Menu } from 'lucide-react';
import { ThemeToggle } from '@/components/theme-toggle';
import { navLinks } from '@/constant/NavigationData';

interface MobileNavProps {
    onNavClick: (id: string) => void;
}

export const MobileNav = ({ onNavClick }: MobileNavProps) => {
    return (
        <div className="lg:hidden flex items-center gap-3">
            <ThemeToggle />
            <Sheet>
                <SheetTrigger asChild>
                    <Button variant="outline" size="icon">
                        <Menu className="h-5 w-5" />
                    </Button>
                </SheetTrigger>
                <SheetContent side="top" className="pt-10">
                    <div className="flex flex-col space-y-4 text-center">
                        {navLinks.map((link) => (
                            <button
                                key={link.id}
                                onClick={() => onNavClick(link.id)}
                                className="cursor-pointer text-base font-semibold text-muted-foreground hover:text-primary transition-colors"
                            >
                                {link.label}
                            </button>
                        ))}
                        <Button asChild className="mt-4 w-full">
                            <Link href="/contact">Kontakt</Link>
                        </Button>
                    </div>
                </SheetContent>
            </Sheet>
        </div>
    );
};