EvoBGP/apps/web/src/components/segmented-tabs.tsx

import type { ReactNode } from 'react'

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
import { cn } from '@evobgp/ui/lib/utils'

export type SegmentedTabItem = {
  value: string
  label: string
  count?: number
  /** @deprecated Счётчик теперь без плашки (линейные вкладки макета). */
  badgeVariant?: string
  icon?: ReactNode
}

interface SegmentedTabsProps {
  items: SegmentedTabItem[]
  value?: string
  defaultValue?: string
  onValueChange?: (value: string) => void
  children: ReactNode
  className?: string
  listClassName?: string
  contentClassName?: string
}

/**
 * Page-level section switcher — line tabs as on the shared mockup boards.
 * @see https://reui.io/preview/base/components/c-tabs-9
 * @see https://reui.io/components/tabs
 */
export function SegmentedTabs({
  items,
  value,
  defaultValue,
  onValueChange,
  children,
  className,
  listClassName,
  contentClassName,
}: SegmentedTabsProps) {
  return (
    <Tabs
      value={value}
      defaultValue={defaultValue}
      onValueChange={onValueChange}
      orientation="horizontal"
      className={cn('w-full min-w-0 gap-4', className)}
    >
      <TabsList variant="line" className={cn('h-10! w-full min-w-0 justify-start gap-0.5 overflow-x-auto [scrollbar-width:none]', listClassName)}>
        {items.map((item) => (
          <TabsTrigger key={item.value} value={item.value} className="flex-none shrink-0 gap-1.5 px-4 text-sm">
            {item.icon}
            {item.label}
            {item.count !== undefined ? (
              <span className="text-muted-foreground font-mono text-xs font-normal">{item.count}</span>
            ) : null}
          </TabsTrigger>
        ))}
      </TabsList>
      <div className={cn('w-full min-w-0', contentClassName)}>{children}</div>
    </Tabs>
  )
}

export { TabsContent }