'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function Navigation() {
  const pathname = usePathname();

  function isActive(path: string) {
    return pathname === path ? 'active' : '';
  }

  return (
    <header
      style={{
        padding: '1rem 2rem',
        backgroundColor: '#2E7D32',
      }}
    >
      <nav className="navbar">
        <strong style={{ fontSize: '1.2rem', color: 'white' }}>
          OnlyPets
        </strong>

        <Link href="/" className={isActive('/')}>Start</Link>
        <Link href="/feed" className={isActive('/feed')}>Feed</Link>
        <Link href="/explore" className={isActive('/explore')}>Entdecken</Link>
        <Link href="/post/new" className={isActive('/post/new')}>Neuer Beitrag</Link>
        <Link href="/profile" className={isActive('/profile')}>Profil</Link>
      </nav>
    </header>
  );
}