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

// Shown at the top of /account and every /vendor/* page for an account that
// can act as both a shopper and a vendor, so it's always obvious which
// dashboard is currently open and there's a one-click way to the other one.
export function DashboardModeBanner({ mode, className = '' }: { mode: 'customer' | 'vendor'; className?: string }) {
  const isVendor = mode === 'vendor';

  return (
    <div className={`mb-6 flex flex-wrap items-center justify-between gap-3 rounded-md border border-gold-200 bg-gold-50 px-4 py-3 ${className}`}>

      <p className="text-sm text-navy-800">
        <span className="font-semibold">{isVendor ? 'Vendor Dashboard' : 'Customer Account'}</span>
        {' — '}
        {isVendor
          ? "you're managing your store here."
          : "you're viewing your personal shopping account here."}
      </p>
      <Link
        href={isVendor ? ROUTES.account : ROUTES.vendorDashboard}
        className="shrink-0 rounded-md border border-navy-800 px-3 py-1.5 text-xs font-semibold text-navy-800 hover:bg-navy-800 hover:text-white"
      >
        {isVendor ? 'Switch to Customer Account' : 'Switch to Vendor Dashboard'}
      </Link>
    </div>
  );
}