// app/components/Header.tsx
import Link from 'next/link';
import Image from 'next/image';
import logo from '../../public/images/logo.svg';

export default function Header() {
    return (
        <header className="bg-black flex justify-center sticky top-0 z-40 shadow-lg">
            <div className="w-fit mx-auto text-center">
                <Link href="/" className="inline-block group">
                    <Image
                        src={logo}
                        loading="eager"
                        alt="Lerbergets Volleybollsällskap"
                        className="w-auto max-h-24 min-h-16 my-4 md:max-h-32 md:min-h-24 md:my-6 mx-auto block transition-all duration-500 ease-out group-hover:scale-105 group-active:scale-95"
                    />
                </Link>
            </div>
        </header>
    );
}