import { SyntheticEvent } from "react";

export interface RadioButtonHandle {
  element: null | HTMLInputElement;
  focus: any;
}

export interface RadioButtonBlurEvent {
  nativeEvent: any;
  syntheticEvent: SyntheticEvent<any>;
  target: RadioButtonHandle;
}

export interface RadioButtonChangeEvent {
  nativeEvent: any;
  syntheticEvent: SyntheticEvent<any>;
  target: RadioButtonHandle;
  value: any;
}

export interface RadioButtonFocusEvent {
  nativeEvent: any;
  syntheticEvent: SyntheticEvent<any>;
  target: RadioButtonHandle;
}

export interface RadioButtonProps {
  dataTestId?: string;
  ariaDescribedBy?: string;
  checked?: boolean;
  children?: any;
  className?: string;
  disabled?: boolean;
  id?: string;
  index?: number;
  label?: string;
  labelPlacement?: "before" | "after";
  name?: string;
  size?: null | "small" | "medium" | "large";
  style?: React.CSSProperties;
  tabIndex?: number;
  valid?: boolean;
  value?: any;
  onBlur?: (event: RadioButtonBlurEvent) => void;
  onChange?: (event: RadioButtonChangeEvent) => void;
  onFocus?: (event: RadioButtonFocusEvent) => void;
}