'use client';

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

// Some accounts can act as both a shopper and a vendor (any `normal_vendor`
// / `marketplace_vendor` account still has a customer side too — they can
// browse and buy like anyone else). This little persistent toggle, shown in
// the header for those accounts only, makes it obvious which "mode" the
// current page belongs to and gives a one-click way to switch — it's the
// same distinction the layout-level DashboardModeBanner below reinforces on
// each dashboard's own page.
export function DashboardModeSwitcher() {
  const pathname = usePathname();
  const isVendorMode = pathname?.startsWith('/vendor') ?? false;

  const tabClass = (active: boolean) =>
    `rounded-full px-3 py-1 text-[11px] font-semibold transition-colors ${
      active ? 'bg-navy-800 text-white' : 'text-navy-500 hover:bg-white hover:text-navy-800'
    }`;

  return (
    <div className="border-t border-navy-100 bg-beige">
      <div className="container-page flex h-10 items-center gap-2 text-xs">
        <span className="text-navy-400">Viewing as:</span>
        <Link href={ROUTES.account} className={tabClass(!isVendorMode)}>
          Customer
        </Link>
        <Link href={ROUTES.vendorDashboard} className={tabClass(isVendorMode)}>
          Vendor
        </Link>
      </div>
    </div>
  );
}