import React from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import Animated, {FadeInDown} from 'react-native-reanimated';
import {
  ENTRANCE_INITIAL_DELAY_MS,
  ENTRANCE_STAGGER_MS,
} from '@modules/prodev2/constants';
import {COMMON_ANIMATION_DURATION} from '@shared/constants';
import {isAndroid} from '@shared/utils';

export interface Props {
  index: number;
  children: React.ReactNode;
  style?: StyleProp<ViewStyle>;
  disabled?: boolean;
}

export function AnimatedCardEntrance({
  index,
  children,
  style,
  disabled,
}: Props) {
  const entering =
    !isAndroid && !disabled
      ? FadeInDown.duration(COMMON_ANIMATION_DURATION).delay(
          ENTRANCE_INITIAL_DELAY_MS + index * ENTRANCE_STAGGER_MS,
        )
      : undefined;

  return (
    <Animated.View entering={entering} style={style}>
      {children}
    </Animated.View>
  );
}

export default AnimatedCardEntrance;