"use client"
import Link from 'next/link';
import { useState } from 'react';

const Navbar: React.FC = () => {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <nav className="bg-gray-800 text-white">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex justify-between h-16 items-center">
                    <div className="shrink-0">
                        <Link href="/" className="text-[var(--color-primary)] text-xl font-bold">MKV Kleinholz</Link>
                    </div>
                    <div className="hidden md:flex space-x-4">
                        <Link href="/" className="hover:text-gray-300">Home</Link>
                        <Link href="/services" className="hover:text-gray-300">Dienstleistungen</Link>
                        <Link href="/about" className="hover:text-gray-300">Über uns</Link>
                    </div>
                    <div className="md:hidden">
                        <button
                            onClick={() => setIsOpen(!isOpen)}
                            className="text-white focus:outline-none"
                        >
                            ☰
                        </button>
                    </div>
                </div>
            </div>

            {isOpen && (
                <div className="md:hidden px-4 pb-4 space-y-2">
                    <Link href="/" className="block hover:text-gray-300">Home</Link>
                    <Link href="/services" className="block hover:text-gray-300">Dienstleistungen</Link>
                    <Link href="/about" className="block hover:text-gray-300">Über uns</Link>
                </div>
            )}
        </nav>
    );
};

export default Navbar;
