// 页面级 Tab 导航 — 与内容区筛选分离 // Logan.Li
import { cn } from '@/lib/utils';

export interface PageTabItem {
  id: string;
  label: string;
  badge?: number | string;
}

interface PageTabsProps {
  items: PageTabItem[];
  value: string;
  onChange: (id: string) => void;
  className?: string;
}

export function PageTabs({ items, value, onChange, className }: PageTabsProps) {
  return (
    <nav
      className={cn('dg-page-tabs flex gap-0.5 border-b border-[var(--border-default)]', className)}
      role="tablist"
    >
      {items.map((tab) => {
        const active = value === tab.id;
        return (
          <button
            key={tab.id}
            type="button"
            role="tab"
            aria-selected={active}
            onClick={() => onChange(tab.id)}
            className={cn(
              'dg-page-tab px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px',
              active
                ? 'text-[var(--brand)] border-[var(--brand)]'
                : 'dg-text-secondary border-transparent hover:text-[var(--text-primary)]',
            )}
          >
            {tab.label}
            {tab.badge != null && (
              <span className="ml-1.5 text-xs dg-text-muted">({tab.badge})</span>
            )}
          </button>
        );
      })}
    </nav>
  );
}