// Metro module 5530 (f5531).
import { ActivityIndicator, View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { CircleCheckIcon } from "../../../design/components/Icon/native/redesign/generated/CircleCheckIcon";
import { Button } from "../../../design/components/Button/native/Button.native";
const useStyles = createStyles({
  card: {
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    borderRadius: Module712.radii.md,
    borderWidth: 1,
    borderColor: Module712.colors.BORDER_SUBTLE,
    padding: Module712.space.PX_16,
    marginBottom: Module712.space.PX_12,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  },
  leftContent: {
    flexDirection: "row",
    alignItems: "center",
    flex: 1,
    marginRight: Module712.space.PX_12
  },
  icon: {
    width: 32,
    height: 32,
    marginRight: Module712.space.PX_12,
    justifyContent: "center",
    alignItems: "center"
  },
  textContent: {
    flex: 1
  },
  connectedStatus: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_8
  }
});
export default function ConnectionCardView(props) {
  const { displayName, description, icon, isLoading, isConnected, canConnect, onConnect } = props;
  const styles = useStyles();
  return <View style={styles.card}>
    <View style={styles.leftContent}>
      <View style={styles.icon}>{icon}</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>
    {isLoading ? <ActivityIndicator size="small" /> : isConnected ? <View style={styles.connectedStatus}>
      <Text variant="text-sm/medium" color="text-feedback-positive">
        {intl.string(t["LV+CXH"])}
      </Text>
      <CircleCheckIcon size="sm" color="status-positive" />
    </View> : <Button variant="primary" size="sm" onPress={onConnect} text={intl.string(t.S0W8Z5)} disabled={!canConnect} />}
  </View>;
};