/* Metro module 6785; source: modules/guild_onboarding/native/ConnectionCardView.tsx; dependencies: [31, 27, 33, 4501, 697, 4573, 1244, 4073, 4578, 2] */
function _fun53429(global, require, importDefault, importAll, module, exports, dependencyMap) { // fn#53429, source: /ci/build/discord/discord/discord_android_rn/android/app/src/main/assets/index.android.bundle:6963:6, offset: 0x013489c3, size: 502 bytes, params: 8, frame: 23
    var object3;
    const env0_0 = require;
    const Object = global.Object;
    Object.defineProperty(exports, '__esModule', {value: true});
    importAll(31) /* metro dependency 31 */;
    let value = require(27) /* metro dependency 27 */;
    const env0_2 = value.View;
    const env0_3 = value.ActivityIndicator;
    value = require(33) /* metro dependency 33 */;
    const env0_4 = value.jsx;
    const env0_5 = value.jsxs;
    value = require(4501) /* metro dependency 4501: createStyles */;
    const createStyles = value.createStyles;
    object3 = {};
    const object4 = {};
    const BACKGROUND_SURFACE_HIGH = (importDefault(697) /* metro dependency 697: native */).colors.BACKGROUND_SURFACE_HIGH;
    object4.backgroundColor = BACKGROUND_SURFACE_HIGH;
    object4.borderRadius = (importDefault(697) /* metro dependency 697: native */).radii.md;
    object4.borderWidth = 1;
    const BORDER_SUBTLE = (importDefault(697) /* metro dependency 697: native */).colors.BORDER_SUBTLE;
    object4.borderColor = BORDER_SUBTLE;
    const PX_16 = (importDefault(697) /* metro dependency 697: native */).space.PX_16;
    object4.padding = PX_16;
    let PX_12 = (importDefault(697) /* metro dependency 697: native */).space.PX_12;
    object4.marginBottom = PX_12;
    object4.flexDirection = 'row';
    object4.alignItems = 'center';
    object4.justifyContent = 'space-between';
    object3.card = object4;
    PX_12 = (importDefault(697) /* metro dependency 697: native */).space.PX_12;
    object3.leftContent = {'flexDirection': 'row', 'alignItems': 'center', 'flex': 1, marginRight: PX_12};
    PX_12 = (importDefault(697) /* metro dependency 697: native */).space.PX_12;
    object3.icon = {'width': 32, 'height': 32, 'marginRight': null, 'justifyContent': 'center', 'alignItems': 'center',
        marginRight: PX_12};
    object3.textContent = {flex: 1};
    const PX_8 = (importDefault(697) /* metro dependency 697: native */).space.PX_8;
    object3.connectedStatus = {'flexDirection': 'row', 'alignItems': 'center', gap: PX_8};
    const env0_6 = Reflect.apply(createStyles, value, [object3]);
    (require(2) /* metro dependency 2 */).fileFinishedImporting('modules/guild_onboarding/native/ConnectionCardView.tsx');
    exports.default = ConnectionCardView;
}

function ConnectionCardView({displayName, description, icon, isLoading, isConnected, canConnect, onConnect}) { // fn#53430, source: /ci/build/discord/discord/discord_android_rn/android/app/src/main/assets/index.android.bundle:6963:872, offset: 0x01348bb9, size: 644 bytes, params: 2, frame: 29
    var r5;
    var Button;
    const intl = (require(1244) /* metro dependency 1244: indexNative */).intl;
    var value;
    const styles = useStyles();
    const view = <View style={styles.icon}>{icon}</View>;
    const Text = (require(4573) /* metro dependency 4573: Text */).Text;
    const view2 = <View style={styles.leftContent}>{view}<View style={styles.textContent}><Text variant="text-md/medium" color="text-strong">{displayName}</Text>{description != null && description.length > 0 && <Text variant="text-sm/normal" color="text-subtle">{description}</Text>}</View></View>;
    if (isLoading) {
        r5 = <ActivityIndicator size="small" />;
    } else if (isConnected) {
        var viewBinding2Props = {style: styles.connectedStatus};
        value = <Text variant="text-sm/medium" color="text-feedback-positive">{intl.string((require(1244) /* metro dependency 1244: indexNative */).t['LV+CXH'])}</Text>;
        value = <View {...viewBinding2Props}>{value}{((CircleCheckIcon) => <CircleCheckIcon size="sm" color="status-positive" />)((require(4073) /* metro dependency 4073: CircleCheckIcon */).CircleCheckIcon)}</View>;
        r5 = value;
    } else {
        Button = (require(4578) /* metro dependency 4578: ButtonNative */).Button;
        r5 = <Button variant="primary" size="sm" onPress={onConnect} text={intl.string((require(1244) /* metro dependency 1244: indexNative */).t.S0W8Z5)} disabled={!canConnect} />;
    }
    return (
        <View style={styles.card}>
            {view2}
            {r5}
        </View>
    );
}