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

import type { ComponentProps, ReactNode } from 'react'

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

import { Badge } from '@/components/reui/badge'

export type SegmentedTabItem = {
  value: string
  label: string
  count?: number
  badgeVariant?: ComponentProps<typeof Badge>['variant']
  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 — native shadcn Tabs, default (segmented) list.
 * @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 className={cn('h-auto w-full min-w-0 justify-start', listClassName)}>
        {items.map((item) => (
          <TabsTrigger key={item.value} value={item.value} className="shrink-0 gap-2">
            {item.icon}
            {item.label}
            {item.count !== undefined ? (
              <Badge variant={item.badgeVariant ?? 'primary-light'} size="sm">
                {item.count}
              </Badge>
            ) : null}
          </TabsTrigger>
        ))}
      </TabsList>
      <div className={cn('w-full min-w-0', contentClassName)}>{children}</div>
    </Tabs>
  )
}

export { TabsContent }