import type { ComponentType, ReactNode } from 'react'
import type { SemanticTag } from './Common'

export interface ScrollDictionary {
  accessibilityLabel: string
  instructionText: string
  progressBarLabel: string
}

export interface ScrollProps {
  /**
   * Scroll items to display. Should be `ScrollItem` components.
   */
  children: ReactNode
  /**
   * Theme tokens for customizing the Scroll appearance.
   */
  tokens?: ScrollTokens
  /**
   * Variant for the Scroll component.
   */
  variant?: ScrollVariant
  /**
   * Select English or French copy for accessible labels.
   */
  copy?: 'en' | 'fr'
  /**
   * Override the default dictionary by passing the complete dictionary object for `en` and `fr`.
   */
  dictionary?: {
    en: ScrollDictionary
    fr: ScrollDictionary
  }
  /**
   * Accessibility label for the scrollable region.
   */
  accessibilityLabel?: string
}

export type ScrollVariant = {}

export interface ScrollTokens {
  itemGap?: number
  progressBarColor?: string
  progressBarHeight?: number
  progressHitAreaHeight?: number
  progressSpacing?: number
  progressTrackColor?: string
  progressTrackHeight?: number
}

export interface ScrollItemProps {
  /**
   * Content of the scroll item.
   */
  children: ReactNode
  /**
   * Sets the HTML tag of the outer container. Defaults to `'li'`.
   */
  tag?: SemanticTag
}

declare const Scroll: ComponentType<ScrollProps>
declare const ScrollItem: ComponentType<ScrollItemProps>

export { Scroll, ScrollItem }