// Metro module 15728 (f15729).
import { useState, useCallback } from "react";
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { RESTRICTED_CONTENT_INSET } from "./RestrictedMessagePreviewLayout";
import Module712 from "../../../_bundle/Module712";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
const useStyles = createStyles({
  toggle: {
    marginLeft: RESTRICTED_CONTENT_INSET,
    marginVertical: Module712.space.PX_8
  }
});
export default function RestrictedBlockedMessageGroup(props) {
  const { messages, renderMessage } = props;
  const styles = useStyles();
  let [expanded, setState] = useState(false);
  const r49 = [<PressableOpacity style={styles.toggle} accessibilityRole="button" accessibilityState={{
    expanded
  }} onPress={useCallback(() => {
    setState((prevState) => !prevState);
  }, [])}>
    <Text variant="text-sm/medium" color="text-muted">
      {intl.format(t["+FcYM/"], {
        count: messages.length
      })}
    </Text>
  </PressableOpacity>, ,];
  if (expanded) {
    expanded = messages.map((message) => <View key={message.id}>
      {renderMessage(message)}
    </View>);
  }
  r49[1] = expanded;
  return <View>{r49}</View>;
};