// Metro module 12290 (f12291).
import { ScrollView } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useUrlParts } from "../../masked_link/SharedStateUtils";
import { Text } from "../../../design/components/Text/native/Text";
const useStyles = createStyles({
  linkCalloutContainer: {
    maxHeight: 300,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    width: "100%",
    borderRadius: Module712.radii.md
  },
  linkCalloutContainerText: {
    padding: Module712.space.PX_8,
    paddingVertical: Module712.space.PX_12,
    textAlign: "center"
  }
});
export function URLCallout(props) {
  const url = props.url;
  const styles = useStyles();
  const urlParts = useUrlParts(url);
  return <ScrollView style={styles.linkCalloutContainer}>
    <Text style={styles.linkCalloutContainerText} variant="text-md/normal">
      <Text variant="text-md/normal" color="text-muted">
        {urlParts.protocol}
        //
      </Text>
      <Text variant="text-md/semibold" color="text-default">{urlParts.hostname}</Text>
      <Text variant="text-md/normal" color="text-muted">{urlParts.theRestOfTheUrl}</Text>
    </Text>
  </ScrollView>;
}