'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ROUTES } from '@/lib/routes';

// Mirrors VendorNav's pattern exactly, so the customer side of the
// dashboard reads as the same kind of layout as the vendor side.
const LINKS = [
  { label: 'My Account', href: ROUTES.account },
  { label: 'Order History', href: ROUTES.orders },
  { label: 'My Inquiries', href: ROUTES.leads },
  { label: 'Messages', href: ROUTES.messages },
];

export function AccountNav() {
  const pathname = usePathname();

  return (
    <nav className="card h-fit p-3 lg:col-span-1">
      <ul className="space-y-1 text-sm font-semibold text-navy-700">
        {LINKS.map((link) => {
          const active = link.href === ROUTES.account ? pathname === link.href : pathname?.startsWith(link.href);
          return (
            <li key={link.href}>
              <Link
                href={link.href}
                className={`block rounded-md px-3 py-2 hover:bg-beige ${active ? 'bg-gold-500 text-navy-800' : ''}`}
              >
                {link.label}
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}