import {memo, useEffect} from 'react';
import Animated, {
  useSharedValue,
  withSpring,
  withTiming,
} from 'react-native-reanimated';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  isActive: boolean;
}

export const PaginationDot = memo(({isActive}: Props) => {
  const {theme} = useTheme();

  const scale = useSharedValue(0);
  const backgroundColor = useSharedValue(
    theme.button.background.primary.disabled,
  );

  useEffect(() => {
    scale.value = withSpring(isActive ? 1.5 : 1, {
      stiffness: 200,
      damping: 12,
    });
    backgroundColor.value = withTiming(
      isActive
        ? theme.button.background.primary.default
        : theme.button.background.primary.disabled,
      {duration: 250},
    );
  }, [isActive, scale, backgroundColor, theme]);

  return (
    <Animated.View
      style={[styles.paginationDot, {transform: [{scale}], backgroundColor}]}
    />
  );
});
