// Metro module 14081 (f14082).
import { useEffect } from "react";
import { View } from "react-native";
import ReanimatedRexport, { useSharedValue, withRepeat, withSequence, Easing, cancelAnimation, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import { withTiming } from "../../../../design/animation/reanimated/timing/timing";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useToken } from "../../../../design/tokens/native/useToken";
import { ArrowSmallUpIcon } from "../../../../design/components/Icon/native/redesign/generated/ArrowSmallUpIcon";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import { AnimatedCircularProgress } from "../../../../_bundle/Module14084";
let __initData, useStyles;
const BouncingArrow = function BouncingArrow(props) {
  const children2 = props.children;
  const sharedValue = useSharedValue(0);
  useEffect(() => {
    sharedValue.set(withRepeat(withSequence(withTiming(-6, {
      duration: 500,
      easing: Easing.inOut(Easing.quad)
    }), withTiming(0, {
      duration: 500,
      easing: Easing.inOut(Easing.quad)
    })), -1));
    return () => cancelAnimation(sharedValue);
  }, [sharedValue]);
  const l = () => ({
    transform: [{
      translateY: sharedValue.get()
    }]
  });
  l.__closure = {
    translateY: sharedValue
  };
  l.__workletHash = 10126349088819;
  l.__initData = __initData;
  return <ReanimatedRexport.View style={useAnimatedStyle(l)}>{children2}</ReanimatedRexport.View>;
};
__initData = {
  code: "function BountiesAutoScrollIndicatorTsx1(){const{translateY}=this.__closure;return{transform:[{translateY:translateY.get()}]};}"
};
useStyles = createStyles({
  root: {
    alignItems: "center",
    gap: Module712.space.PX_8
  },
  ringContainer: {
    alignItems: "center",
    justifyContent: "center",
    width: 40,
    height: 40
  }
});
export default function BountiesAutoScrollIndicator(props) {
  const { progress, showProgressRing = true } = props;
  const styles = useStyles();
  const token = useToken(Module712.colors.WHITE);
  const r16 = <ArrowSmallUpIcon size="md" color={Module712.colors.WHITE} />;
  let c20889_0 = r16;
  return <View style={styles.root}>
    <Text variant="text-md/semibold" color="text-default">
      {intl.string(t.eafsh4)}
    </Text>
    <View style={styles.ringContainer}>
      {showProgressRing ? <AnimatedCircularProgress size={40} width={3} fill={100 * progress} duration={0} rotation={0} lineCap="round" tintColor={token} backgroundColor="rgba(255, 255, 255, 0.35)">
        {() => c20889_0}
      </AnimatedCircularProgress> : <BouncingArrow>{r16}</BouncingArrow>}
    </View>
  </View>;
};