'use client';

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

const headerItems = [
  {
    name: 'Races',
    link: '/races'
  },
  {
    name: 'Classes',
    link: '/classes'
  },
  {
    name: 'Feats',
    link: '/feats'
  },
  {
    name: 'Options & Features',
    link: '/options'
  },
  {
    name: 'Backgrounds',
    link: '/backgrounds'
  },
  {
    name: 'Items',
    link: '/items'
  },
  {
    name: 'Spells',
    link: '/spells'
  }
];

export default function Topbar() {
  const pathName = usePathname();

  return (
    <nav className='navbar'>
      <div className='left'>
        <Link href={'/'} className='title'>
          Siren
        </Link>
        <div className='header-items'>
          {headerItems.map((item) => (
            <Link className={`header-item ${pathName == item.link && 'active'}`} href={item.link} key={item.name}>
              {item.name}
            </Link>
          ))}
        </div>
      </div>
    </nav>
  );
}