'use client';

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

type NavItem = {
  href: string;
  label: string;
};

const navItems: NavItem[] = [
  { href: '/', label: '首頁' },
  { href: '/daily-card', label: '作戰' },
  { href: '/live-score', label: '比分' },
  { href: '/schedule', label: '賽程' },
  { href: '/source-health', label: '健康' },
];

export function MobileBottomNav() {
  const path = usePathname() || '/';

  return (
    <nav className="fixed inset-x-0 bottom-0 z-40 border-t border-[#e7cfa7] bg-[#f6f0e1]/95 shadow-[0_-8px_24px_rgba(98,58,34,0.12)] backdrop-blur md:hidden">
      <div className="mx-auto flex max-w-7xl justify-between px-2 py-2">
        {navItems.map((item) => {
          const isActive = item.href === '/' ? path === '/' : path === item.href || path.startsWith(`${item.href}/`);
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`dot-matrix flex-1 rounded-xl px-3 py-2 text-center text-xs font-semibold transition ${
                isActive ? 'bg-[#7d2a15] text-white' : 'text-[#6a4935]'
              }`}
            >
              {item.label}
            </Link>
          );
        })}
      </div>
    </nav>
  );
}