import type { ComponentType, ReactNode } from 'react'

export type RibbonVariants = {
  purpose?: 'offer' | 'default' | 'editorial' | 'subtle'
}

export type RibbonTokens = {
  backgroundColor?: string
  borderRadius?: number
  borderRadiusBottomLeft?: number
  borderRadiusBottomRight?: number
  boxShadowColor?: string
  boxShadowPaddingBottom?: number
  boxShadowPaddingLeft?: number
  boxShadowPaddingRight?: number
  boxShadowPaddingTop?: number
  curveAfterBackgroundColor?: string
  curveAfterHeight?: number
  curveAfterRadius?: number
  curveAfterWidth?: number
  curveBackgroundColor?: string
  curveHeight?: number
  curveMarginTop?: number
  curveWidth?: number
  fontColor?: string
  fontName?: string
  fontSize?: number
  fontWeight?: string | number
  gradient?: Record<string, any>
  lineHeight?: number
  paddingBottom?: number
  paddingLeft?: number
  paddingRight?: number
  paddingTop?: number
}

export interface RibbonProps {
  children?: ReactNode
  variant?: RibbonVariants
  tokens?: RibbonTokens
  /** Sets the left offset (triggers absolute positioning) */
  left?: number
  /** Sets the top offset (triggers absolute positioning) */
  top?: number
  customGradient?: (
    gradient: { colors: string[]; start: { x: number; y: number }; end: { x: number; y: number } },
    styles: Record<string, unknown>,
    content: ReactNode
  ) => ReactNode
  testID?: string
  nativeID?: string
  onLayout?: (event: any) => void
  pointerEvents?: 'all' | 'none' | 'box-only' | 'box-none'
  dataSet?: Record<string, any>
}

declare const Ribbon: ComponentType<RibbonProps>

export { Ribbon }