import React, { FC, useContext } from 'react';
import { View } from 'react-native';
import { BadgeDotProps } from './types';
import styles from './styles';
import { MiniAppContext } from '../Context';

const BadgeDot: FC<BadgeDotProps> = ({ size = 'large', style }) => {
  const context = useContext<any>(MiniAppContext);
  let dotStyle;
  let dotContainerStyle;

  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;

  if (size === 'large') {
    dotStyle = styles.dot;
    dotContainerStyle = styles.dotContainer;
  } else {
    dotStyle = styles.dotSmall;
    dotContainerStyle = styles.dotSmallContainer;
  }

  return (
    <View
      style={[
        style,
        dotContainerStyle,
        showBaseLineDebug && styles.debugBaseLine,
      ]}
    >
      <View style={[dotStyle]} />
    </View>
  );
};

export default BadgeDot;