'use client';
import { usePathname, useRouter } from 'next/navigation';

/** Mobile section switcher for the admin shell (< lg): a native select that navigates. */
export function AdminNavSelect({ items }: { items: { href: string; label: string }[] }) {
  const router = useRouter();
  const pathname = usePathname();
  const current = items.find((i) => pathname === i.href || pathname.startsWith(i.href + '/'))?.href ?? items[0]?.href ?? '';
  return (
    <label className="block lg:hidden">
      <span className="sr-only">Admin section</span>
      <select value={current} onChange={(e) => router.push(e.target.value)} className="h-11 w-full border border-rule bg-surface px-2.5 text-sm text-ink focus:border-accent focus:outline-none">
        {items.map((i) => (
          <option key={i.href} value={i.href}>
            {i.label}
          </option>
        ))}
      </select>
    </label>
  );
}