// Metro module 13951 (f13952).
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { AVATAR_SIZE_MAP, AvatarSizes, Avatar } from "../../../design/void/native";
import Module712 from "../../../_bundle/Module712";
import { useLinkTimestampText } from "../hooks/useUserLinks";
import FamilyCenterUsernameHeader from "./FamilyCenterUsernameHeader";
import { Text } from "../../../design/components/Text/native/Text";
const useStyles = createStyles({
  container: {
    display: "flex",
    flexDirection: "row",
    flexGrow: 1,
    flexShrink: 1
  },
  avatar: {
    borderRadius: AVATAR_SIZE_MAP[AvatarSizes.NORMAL] / 2,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
  },
  detailsContainer: {
    paddingLeft: Module712.space.PX_12,
    paddingRight: Module712.space.PX_4,
    flexGrow: 1,
    flexShrink: 1
  }
});
export default function FamilyCenterRequestorDetails(props) {
  const { otherUser, status } = props;
  const styles = useStyles();
  return <View style={styles.container}>
    <Avatar avatarStyle={styles.avatar} user={otherUser} guildId={void 0} disablePlaceholder avatarDecoration={otherUser.avatarDecoration} />
    <View style={styles.detailsContainer}>
      <FamilyCenterUsernameHeader user={otherUser} />
      <Text variant="text-xs/semibold" color="text-muted">
        {useLinkTimestampText(otherUser.id, status)}
      </Text>
    </View>
  </View>;
};