// Metro module 15965 (f15966).
import { memo, useContext, useCallback } from "react";
import { Pressable } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import VoicePanelStateContext from "../VoicePanelStateContext";
import ChannelRTCActionCreators from "../../../../actions/ChannelRTCActionCreators";
import NativeView from "../../../core/native/NativeView";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
const useStyles = createStyles({
  container: {
    width: "100%",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
    padding: 16,
    backgroundColor: Module712.colors.VOICE_VIDEO_VIDEO_TILE_BACKGROUND
  },
  label: {
    marginBottom: 16,
    textAlign: "center"
  },
  button: {
    paddingHorizontal: 20,
    paddingVertical: 12,
    backgroundColor: "white",
    borderRadius: Module712.radii.round
  },
  buttonText: {
    color: Module712.unsafe_rawColors.PRIMARY_860
  }
});
const r45 = memo(function VoicePanelNoVideoParticipantsCard() {
  const channelId = useContext(VoicePanelStateContext).channelId;
  const styles = useStyles();
  const callback = useCallback(() => {
    ChannelRTCActionCreators.toggleVoiceParticipantsHidden(channelId, false);
  }, [channelId]);
  return <NativeView style={styles.container}>
    <Text style={styles.label} variant="text-md/semibold" color="text-overlay-light">
      {intl.string(t["8eBJ73"])}
    </Text>
    <Pressable style={styles.button} onPress={callback} accessibilityRole="button" accessibilityLabel={intl.string(t.kLQySL)}>
      <Text variant="text-sm/semibold" style={styles.buttonText}>
        {intl.string(t.kLQySL)}
      </Text>
    </Pressable>
  </NativeView>;
});
export default r45;