// Metro module 15108 (f15109).
import { memo } from "react";
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { Icon } from "../../../design/void/native";
import Module12848 from "../../../_bundle/Module12848";
import { Text } from "../../../design/components/Text/native/Text";
const useStyles = createStyles({
  videoIcon: {
    height: 16,
    width: 16,
    marginRight: 4,
    tintColor: Module712.colors.VOICE_CHANNEL_USER_LIMIT_ICON
  },
  wrapper: {
    backgroundColor: Module712.colors.VOICE_CHANNEL_USER_LIMIT_BACKGROUND,
    alignItems: "center",
    flexDirection: "row",
    borderRadius: 10,
    borderWidth: Module712.modules.mobile.VOICE_CHANNEL_USER_LIMIT_BORDER_WIDTH,
    borderColor: Module712.colors.BORDER_SUBTLE,
    overflow: "hidden"
  },
  left: {
    height: 20,
    flexDirection: "row",
    paddingLeft: 6,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Module712.colors.VOICE_CHANNEL_USER_LIMIT_BACKGROUND
  },
  mid: {
    borderTopWidth: 20,
    borderBottomWidth: 0,
    borderTopColor: "transparent",
    borderBottomColor: "transparent",
    borderRightWidth: 6,
    borderRightColor: Module712.colors.VOICE_CHANNEL_USER_LIMIT_ACCENT_BACKGROUND,
    paddingRight: 2
  },
  right: {
    height: 20,
    flexDirection: "row",
    paddingRight: 6,
    paddingLeft: 2,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Module712.colors.VOICE_CHANNEL_USER_LIMIT_ACCENT_BACKGROUND
  }
});
const r63 = memo(function VoiceChannelUserLimit(props) {
  const { users, total, videoLimit } = props;
  const styles = useStyles();
  return <View style={styles.wrapper}>
    <View style={styles.left}>
      {videoLimit ? <Icon source={Module12848} size={Icon.Sizes.REFRESH_SMALL_16} style={styles.videoIcon} /> : null}
      <Text variant="text-xs/medium" lineClamp={1} color="voice-channel-user-limit-text">
        {users.toString().padStart(2, "0")}
      </Text>
    </View>
    <View style={styles.mid} />
    <View style={styles.right}>
      <Text variant="text-xs/medium" lineClamp={1} color="voice-channel-user-limit-text">
        {total.toString().padStart(2, "0")}
      </Text>
    </View>
  </View>;
});
export default r63;