/**
 * Wraps slide content and shifts it horizontally for the parallax effect.
 * Native-only: uses reanimated carousel animationValue + ct-design Animated.Container.
 *
 * @example
 * <SlideImage animationValue={animationValue} slideWidth={320}>
 *   <Image source={{ uri: url }} />
 * </SlideImage>
 */
import { memo } from 'react';

import { Animated } from '@cleartrip/ct-design-animated';
import { Container } from '@cleartrip/ct-design-container';

import { useParallaxSlideAnimated } from '../hooks/useParallaxSlideAnimated';
import { staticStyles } from './style';
import { ISlideImageProps } from '../type';

const SlideImage = ({ animationValue, slideWidth, children, testID }: ISlideImageProps) => {
  const parallaxAnimatedStyle = useParallaxSlideAnimated({ animationValue, slideWidth });

  return (
    <Container testID={testID ? `${testID}-SlideImage` : undefined} styleConfig={{ root: [staticStyles.imageClip] }}>
      <Animated.Container animated={parallaxAnimatedStyle} styleConfig={{ root: [staticStyles.imageMover] }}>
        <Container styleConfig={{ root: [staticStyles.imageSlot] }}>{children}</Container>
      </Animated.Container>
    </Container>
  );
};

export default memo(SlideImage);