import React, { FC, useContext } from 'react';
import { Animated } from 'react-native';
import styles from './styles';
import { DotProps } from './types';
import { ApplicationContext } from '../Context';

const Dot: FC<DotProps> = ({ active, style }) => {
  const { theme } = useContext(ApplicationContext);
  const dotStyle = active
    ? [styles.activeDot]
    : [
        styles.inactiveDot,
        { backgroundColor: theme.colors.background.pressed },
      ];

  return <Animated.View style={[style, dotStyle]} />;
};

export default Dot;