import type { CSSProperties, ReactNode } from 'react'

/** Figma fill: #F68B1F | #1C2473 | #ED1C24 | #007839 | #F5F5F5 | transparent */
export type ConsumerButtonFill = 'orange' | 'navy' | 'fourth' | 'fifth' | 'gray' | 'none'

/** Figma radius: pill or 10px control */
export type ConsumerButtonRadius = 'full' | 'control'

/** Button height tokens — see `consumer-ui-guidelines.md` (scale differs from ConsumerInput). */
export type ConsumerButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

/** Content alignment inside the button (RTL: `start` = right) */
export type ConsumerButtonAlign = 'center' | 'start'

export type ConsumerButtonIconPosition = 'start' | 'end'

export interface ConsumerButtonProps {
  'aria-controls'?: string
  'aria-expanded'?: boolean | 'true' | 'false'
  'aria-label'?: string
  'aria-pressed'?: boolean | 'true' | 'false'
  'aria-checked'?: boolean | 'true' | 'false'
  'aria-selected'?: boolean | 'true' | 'false'
  align?: ConsumerButtonAlign
  children?: ReactNode
  className?: string
  radius?: ConsumerButtonRadius
  disabled?: boolean
  fill?: ConsumerButtonFill
  fontSize?: number
  fullWidth?: boolean
  icon?: ReactNode
  iconEnd?: ReactNode
  iconOnly?: boolean
  iconPosition?: ConsumerButtonIconPosition
  iconStart?: ReactNode
  isLoading?: boolean
  role?: React.AriaRole
  size?: ConsumerButtonSize
  target?: '_blank' | '_self'
  /** Preset white, Tailwind class (e.g. `text-primary`), or hex (e.g. `#333A44`). */
  textColor?: 'white' | (string & {})
  to?: string
  type?: 'button' | 'submit' | 'reset'
  onClick?: () => void
}

export interface ResolvedConsumerButtonStyle {
  className: string
  style: CSSProperties
}