// Metro module 8696 (f8697).
import { View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import Module38 from "../../../../_bundle/Module38";
import { CollectiblesItemType } from "../../../../_bundle/Module1901";
import { getNameplateData } from "../utils";
import { NameplateDummyUserPreview } from "./NameplateDummyUserPreview";
import { AvatarSizes } from "../../../../design/void/native";
const useStyles = createStyles({
  nameplatePreviewContainer: {
    position: "absolute",
    justifyContent: "center",
    alignItems: "center",
    width: "100%",
    height: "100%",
    paddingHorizontal: Module712.space.PX_8
  },
  nameplateContainer: {
    width: "100%",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
    borderRadius: Module712.radii.sm
  },
  nameplate: {
    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED
  }
});
export default function NameplateCardPreview(props) {
  const { item, animate = false } = props;
  const styles = useStyles();
  Module38(item.type === CollectiblesItemType.NAMEPLATE, "Item must be Nameplate");
  return <View style={styles.nameplatePreviewContainer}>
    <NameplateDummyUserPreview width={34} avatarSize={AvatarSizes.XSMALL} hideAvatar style={[{
      opacity: 0.6
    }]} />
    <NameplateDummyUserPreview width={44} avatarSize={AvatarSizes.XSMALL} hideAvatar style={[{
      opacity: 0.6
    }]} />
    <View style={styles.nameplateContainer}>
      <NameplateDummyUserPreview width={54} avatarSize={AvatarSizes.XSMALL} nameplate={getNameplateData(item)} style={styles.nameplate} animate={animate} />
    </View>
    <NameplateDummyUserPreview width={44} avatarSize={AvatarSizes.XSMALL} hideAvatar style={[{
      opacity: 0.6
    }]} />
    <NameplateDummyUserPreview width={34} avatarSize={AvatarSizes.XSMALL} hideAvatar style={[{
      opacity: 0.6
    }]} />
  </View>;
};