import * as React from 'react'
import {
  Tabs as RadixTabs,
  TabsList as RadixTabsList,
  TabsTrigger as RadixTabsTrigger,
} from './tabs'

/**
 * TabItem-based single-component API над Radix Tabs. Замена @nstart/ui Tabs
 * с теми же props ({@code items, value, onValueChange}).
 *
 * Использование (legacy):
 *   <Tabs items={[{id: 'a', label: 'A'}, {id: 'b', label: 'B'}]}
 *         value={active} onValueChange={setActive} />
 *
 * Для content panels используйте TabsContent с radix Tabs root напрямую —
 * этот adapter рендерит только tab bar.
 *
 * Новый код может использовать `<Tabs.Root>...<TabsList><TabsTrigger value="a">A</...`
 * directly из ui/components/tabs.tsx.
 */

export type TabItem = {
  id: string
  label: React.ReactNode
  disabled?: boolean
  /** Right-aligned content в tab (badge, indicator). Alias `trailing`. */
  trailing?: React.ReactNode
  /** nstart-compat alias для `trailing`. Если оба заданы — count wins. */
  count?: React.ReactNode
}

export type TabsSimpleProps = {
  items: ReadonlyArray<TabItem>
  value: string
  onValueChange: (id: string) => void
  className?: string
}

export function TabsSimple({ items, value, onValueChange, className }: TabsSimpleProps) {
  return (
    <RadixTabs value={value} onValueChange={onValueChange} className={className}>
      <RadixTabsList>
        {items.map((item) => (
          <RadixTabsTrigger key={item.id} value={item.id} disabled={item.disabled}>
            <span className="inline-flex items-center gap-1.5">
              {item.label}
              {item.count ?? item.trailing}
            </span>
          </RadixTabsTrigger>
        ))}
      </RadixTabsList>
    </RadixTabs>
  )
}
