export function TabNav({ tabs, active, onChange }) {
  return (
    <nav className="flex gap-1 border-b border-border">
      {tabs.map(t => (
        <button
          key={t.id}
          onClick={() => onChange(t.id)}
          className={
            'px-4 py-3 text-sm font-medium transition-colors border-b-2 -mb-px ' +
            (t.id === active
              ? 'text-accent border-accent'
              : 'text-muted hover:text-ink border-transparent')
          }
        >
          {t.label}
        </button>
      ))}
    </nav>
  )
}