'use client';
import { Icon } from '@/lib/icons';

export type SubnavItem = [key: string, icon: string, label: string, badge?: number];

/** Horizontal, labeled sub-navigation shown only on mobile inside the account / pro areas. */
export function MobileSubnav({
  items,
  active,
  onSelect,
}: {
  items: SubnavItem[];
  active: string;
  onSelect: (k: string) => void;
}) {
  return (
    <div className="mobile-subnav">
      {items.map(([k, ic, lb, badge]) => (
        <button key={k} className={active === k ? 'on' : ''} onClick={() => onSelect(k)}>
          <Icon name={ic} size={16} stroke={active === k ? 2.2 : 1.8} />
          <span>{lb}</span>
          {!!badge && badge > 0 && <span className="msub-badge">{badge}</span>}
        </button>
      ))}
    </div>
  );
}