'use client';

import {useEffect, useState} from 'react';
import Link from 'next/link';
import Links from '@/app/Links';

export default function Navbar() {
    const [scrolled, setScrolled] = useState(false);

    useEffect(() => {
        const handleScroll = () => {
            setScrolled(window.scrollY > 30);
        };
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    return (
        <nav
            className={`fixed top-0 left-0 right-0 z-50 transition-colors duration-300 px-6 md:px-12 lg:px-24 py-5 ${
                scrolled
                    ? 'bg-white text-gray-900 shadow-md'
                    : 'bg-transparent text-white'
            }`}
        >
            <div className="flex justify-between items-center font-sans tracking-wide">
                <Link href={Links.home}>
                    <span className="text-2xl md:text-3xl font-extrabold">Kanzlei Mustermann</span>
                </Link>
                <div className="space-x-6 text-base md:text-lg font-semibold">
                    <Link href={Links.about}>Über uns</Link>
                </div>
            </div>
        </nav>
    );
}