import type { ComponentType, ElementType } from 'react'
import { Size } from './Common'
import { IconProps } from './Icon'
import { TypographyVariants, TypographyTokens } from './Typography'
import { HorizontalScrollButtonTokens } from './HorizontalScrollButton'

export type TabsItem = {
  label: string
  href: string
  id: string
  linkRouter?: ElementType
  linkRouterProps?: Record<string, any>
}

export type TabsVariant = {
  equalWidth?: string
  inverse?: boolean
}

export interface TabsProps {
  items: Array<TabsItem>
  value?: string
  initialValue?: string
  onChange?: () => void
  itemTokens?: Partial<TabsTokens>
  scrollButtonTokens?: HorizontalScrollButtonTokens
  variant?: TabsVariant
  LinkRouter?: ElementType
  linkRouterProps?: Record<string, any>
}

export type TabsTokens = {
  nextIcon?: IconProps
  previousIcon?: IconProps
  space?: number
  buttonClearance?: Size
  gutter?: Size
  borderBottomColor?: string
  borderBottomWidth?: number
}

export interface TabSelectorProps {
  items: TabsItem[]
  initialValue?: string
  value?: string
  onChange?: (value: string) => void
  labelVariant?: TypographyVariants
  labelTokens?: TypographyTokens
  testID?: string
  selectedTestID?: string
}

declare const Tabs: ComponentType<TabsProps>

export { Tabs }