import {ViewStyle} from 'react-native';

/**
 * Props for a general Badge component. It can display a wide range of badges including simple labels, numbers, or dots.
 */
export type BadgeProps = {
  /**
   * Optional. The text to display on the badge. This could be a number or string, depending on the badge's purpose.
   */
  label?: string | number;

  /**
   * Optional. Custom styles to apply to the badge component. Can be a single style or an array of styles.
   */
  style?: ViewStyle | ViewStyle[];

  /**
   * Optional. Custom background badge.
   */
  backgroundColor?: string;

  /**
   *
   */
  accessibilityLabel?: string;
};

/**
 * Props for a BadgeDot component. It specifically represents a dot-style badge, typically used for notification indicators.
 */
export type BadgeDotProps = {
  /**
   * Optional. The size of the dot, either 'small' or 'large'. This allows for better visual alignment with different UI elements.
   */
  size?: 'small' | 'large';

  /**
   * Optional. Custom styles to apply to the badge dot component. Can be a single style or an array of styles.
   */
  style?: ViewStyle | ViewStyle[];
};

/**
 * Props for a BadgeRibbon component. It represents a more specialized badge in the shape of a ribbon, allowing for placement around containers.
 */
export type BadgeRibbonProps = {
  /**
   * The text to display on the ribbon-style badge. Unlike other badges, ribbons typically carry more descriptive text.
   */
  label: string;

  /**
   * Optional. Determines the placement of the ribbon on its parent container. The position can be any corner of the container.
   * Defaults to 'top_right' if not specified.
   */
  position?: 'top_right' | 'top_left' | 'bottom_right' | 'bottom_left';

  /**
   * Optional. If true, the edges of the ribbon badge will be rounded. This is purely a stylistic choice.
   * Defaults to `false` if not provided, resulting in a flat-edged ribbon.
   */
  isRound?: boolean;

  /**
   * Optional. Custom styles to apply to the ribbon badge component. Can be a single style or an array of styles.
   */
  style?: ViewStyle | ViewStyle[];
};