// Metro module 9288 (f9289).
import { useEffect } from "react";
import { View } from "react-native";
import { MOBILE_PREVIEW_MESSAGE_COUNT } from "../../ConversationConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import ReanimatedRexport, { useSharedValue, withRepeat, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import { withTiming } from "../../../../design/animation/reanimated/timing/timing";
const useStyles = createStyles({
  row: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_8,
    marginTop: Module712.space.PX_4
  },
  rowSpacing: {
    marginTop: Module712.space.PX_26
  },
  avatar: {
    width: 24,
    height: 24,
    borderRadius: Module712.radii.round,
    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG
  },
  lines: {
    flex: 1,
    gap: Module712.space.PX_4
  },
  lineName: {
    height: 10,
    width: "35%",
    borderRadius: Module712.radii.xs,
    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG
  },
  lineText: {
    height: 10,
    borderRadius: Module712.radii.xs,
    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG
  }
});
const __initData = {
  code: "function ConversationPreviewSkeletonTsx1(){const{opacity}=this.__closure;return{opacity:opacity.get()};}"
};
export default function ConversationPreviewSkeleton() {
  const styles = useStyles();
  const sharedValue = useSharedValue(0.4);
  useEffect(() => {
    sharedValue.set(withRepeat(withTiming(1, {
      duration: 700
    }), -1, true));
  }, [sharedValue]);
  const r20 = () => ({
    opacity: sharedValue.get()
  });
  r20.__closure = {
    opacity: sharedValue
  };
  r20.__workletHash = 11432452203963;
  r20.__initData = __initData;
  return <ReanimatedRexport.View style={useAnimatedStyle(r20)} aria-hidden>
    {Array.from({
      length: MOBILE_PREVIEW_MESSAGE_COUNT
    }, (a0, a1) => <View key={a1} style={[styles.row, a1 > 0 && styles.rowSpacing]}>
      <View style={styles.avatar} />
      <View style={styles.lines}>
        <View style={styles.lineName} />
        <View style={styles.lineText} />
      </View>
    </View>)}
  </ReanimatedRexport.View>;
};