import React from 'react';
import Animated, {SharedValue, useAnimatedStyle} from 'react-native-reanimated';
import {Typography} from '@components/_core/Typography';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  attachmentsLength: number;
  fadeAnimation: SharedValue<number>;
  index: number;
}

export function Header({attachmentsLength, fadeAnimation, index}: Props) {
  const {theme} = useTheme();
  const opacityStyle = useAnimatedStyle(() => ({opacity: fadeAnimation.value}));

  return (
    <Animated.View style={[styles.imageCounter, opacityStyle]}>
      <Typography color={theme.background.elements.default} variant="xxs">
        {`${index + 1}/${attachmentsLength}`}
      </Typography>
    </Animated.View>
  );
}
