EvoBGP/apps/web/src/components/badge-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 BadgeTabItem = {
  value: string
  label: string
  count?: number
  badgeVariant?: ComponentProps<typeof Badge>['variant']
  icon?: ReactNode
}

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

/** Underline tabs with optional badge counts (ReUI c-tabs-7 pattern). */
export function BadgeTabs({
  items,
  value,
  defaultValue,
  onValueChange,
  children,
  className,
  listClassName,
  contentClassName,
}: BadgeTabsProps) {
  return (
    <Tabs
      value={value}
      defaultValue={defaultValue}
      onValueChange={onValueChange}
      orientation="horizontal"
      className={cn('w-full', className)}
    >
      <TabsList
        variant="line"
        className={cn('mb-3.5 w-full justify-start gap-6', listClassName)}
      >
        {items.map((item) => (
          <TabsTrigger key={item.value} value={item.value} className="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 }