import React from 'react';
import { Animated } from 'react-native';
import { StyledIndicator } from './StyledTabs';

const ActiveTabIndicator = ({
  scrollOffsetAnimatedValue,
  positionAnimatedValue,
  tabsLength,
  tabsWidth,
}: {
  scrollOffsetAnimatedValue: Animated.Value;
  positionAnimatedValue: Animated.Value;
  tabsLength: number;
  tabsWidth: number;
}) => {
  const inputRange = [0, tabsLength];
  const indicatorWidth = tabsWidth / tabsLength;

  const translateX = Animated.add(
    scrollOffsetAnimatedValue,
    positionAnimatedValue
  ).interpolate({
    inputRange,
    outputRange: [0, tabsLength * indicatorWidth],
  });

  return (
    <StyledIndicator
      themeWidth={indicatorWidth}
      style={{
        transform: [{ translateX }],
      }}
    />
  );
};

export default ActiveTabIndicator;