import type { ComponentType } from 'react'
import { Direction, ResponsiveDirection } from './Common'

export type CheckboxCardGroupProps = {
  copy?: 'en' | 'fr'
  variant?: 'fullWidth'
  legend?: string
  tooltip?: string
  hint?: string
  hintPosition?: 'inline' | 'below'
  validation?: 'error' | 'success'
  feedback?: string
  initialCheckedIds?: string[]
  checkedIds?: string[]
  onChange?: (checkedIds: string[]) => void
  readOnly?: boolean
  inactive?: boolean
  items?: any[]
  name?: string
}

export type CheckboxCardGroupTokens = {
  borderBottomLeftRadius?: number
  borderBottomRightRadius?: number
  borderTopLeftRadius?: number
  borderTopRightRadius?: number
  direction?: Direction | ResponsiveDirection
  fieldSpace?: number
  outlineOffset?: number
  outlineWidth?: number
  showIcon?: boolean
  space?: number
}

export type CheckboxCardTokens = {
  outerBorderColer?: string
  outerBorderWidth?: number
  outerBorderGap?: number
  flex?: number
  backgroundColor?: string
  borderColor?: string
  borderRadius?: number
  borderWidth?: number
  paddingBottom?: number
  paddingLeft?: number
  paddingRight?: number
  paddingTop?: number
  minWidth?: number
  shadow?: string
  contentAlignItems?: string
  contentJustifyContent?: string
  contentFlexGrow?: number
  contentFlexShrink?: number
  checkboxCheckedBackgroundColor?: string
  checkboxCheckedSize?: number
  checkboxInputBackgroundColor?: string
  checkboxInputBorderColor?: string
  checkboxInputBorderWidth?: number
  checkboxInputOutlineColor?: string
  checkboxInputOutlineWidth?: number
  checkboxInputSize?: number
  checkboxOuterBorderColor?: string
  checkboxOuterBorderWidth?: number
  checkboxOuterBorderGap?: number
  fontSize?: number
  fontName?: string
  lineHeight?: number
  color?: string
  letterSpacing?: string
  textTransform?: string
  fontWeight?: number
  checkboxSpace?: number
  contentSpace?: number
}

declare const CheckboxCardGroup: ComponentType<CheckboxCardGroupProps>

export { CheckboxCardGroup }