'use client';

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

const ITEMS = [
  { href: '/', label: '测试', icon: 'home' },
  { href: '/discover', label: '发现', icon: 'discover' },
  { href: '/me', label: '我的', icon: 'me' }
];

export default function BottomNav(): React.ReactElement {
  const pathname = usePathname();
  return (
    <nav className="bottomNav" aria-label="主导航">
      {ITEMS.map(item => {
        const active = item.href === '/' ? pathname === '/' : pathname.startsWith(item.href);
        return (
          <Link key={item.href} href={item.href} className={`navItem ${active ? 'active' : ''}`}>
            <i className={`navGlyph ${item.icon}`} />
            <span>{item.label}</span>
          </Link>
        );
      })}
    </nav>
  );
}