'use client';

import Link from 'next/link';
import { useState } from 'react';
import { FaBars, FaTimes } from 'react-icons/fa';

export default function Header() {
  const [isOpen, setIsOpen] = useState(false);

  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  return (
    <header className="fixed top-0 left-0 w-full bg-white shadow-md z-50">
      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
        <Link href="/" className="text-2xl font-bold">FF Friedberg</Link>
        <div className="md:hidden">
          <button onClick={toggleMenu} className="text-2xl z-50 relative">
            {isOpen ? <FaTimes /> : <FaBars />}
          </button>
        </div>
        <nav className={`md:flex ${isOpen ? 'block' : 'hidden'} fixed md:relative top-0 left-0 w-full h-full md:w-auto md:h-auto bg-white md:bg-transparent z-40`}>
          <ul className="flex flex-col md:flex-row items-center justify-center h-full md:space-x-4 space-y-4 md:space-y-0 p-4 md:p-0">
            <li><Link href="/#program" className="hover:underline" onClick={toggleMenu}>Programm</Link></li>
            <li><Link href="/#info" className="hover:underline" onClick={toggleMenu}>Infos</Link></li>
            <li><Link href="/#contact" className="hover:underline" onClick={toggleMenu}>Kontakt</Link></li>
            <li><Link href="/impressum" className="hover:underline" onClick={toggleMenu}>Impressum</Link></li>
          </ul>
        </nav>
      </div>
    </header>
  );
}