import { SymbolView } from "expo-symbols";import { Platform, Pressable } from "react-native";import { useThemeColor } from "../../lib/useThemeColor"; import { AppText as Text } from "../../components/AppText";import { cn } from "../../lib/cn"; const CARD_SHADOW = Platform.select({  ios: {    shadowColor: "rgba(23,23,23,0.08)",    shadowOffset: { width: 0, height: 4 },    shadowOpacity: 1,    shadowRadius: 16,  },  android: { elevation: 3 },}); const CARD_SHADOW_DARK = Platform.select({  ios: {    shadowColor: "#000",    shadowOffset: { width: 0, height: 2 },    shadowOpacity: 0.18,    shadowRadius: 8,  },  android: { elevation: 4 },}); export { CARD_SHADOW, CARD_SHADOW_DARK }; export function ConnectionSheetButton(props: {  readonly icon: React.ComponentProps<typeof SymbolView>["name"];  readonly label: string;  readonly disabled?: boolean;  readonly tone?: "primary" | "secondary" | "danger";  readonly compact?: boolean;  readonly onPress: () => void;}) {  const tone = props.tone ?? "secondary";   const primaryBg = useThemeColor("--color-primary");  const primaryFg = useThemeColor("--color-primary-foreground");  const dangerBg = useThemeColor("--color-danger");  const dangerBorderColor = useThemeColor("--color-danger-border");  const dangerFg = useThemeColor("--color-danger-foreground");  const secondaryBg = useThemeColor("--color-secondary");  const secondaryFg = useThemeColor("--color-secondary-foreground");  const borderColor = useThemeColor("--color-border");   const colors =    tone === "primary"      ? {          backgroundColor: primaryBg,          borderColor: "transparent",          textColor: primaryFg,        }      : tone === "danger"        ? {            backgroundColor: dangerBg,            borderColor: dangerBorderColor,            textColor: dangerFg,          }        : {            backgroundColor: secondaryBg,            borderColor: borderColor,            textColor: secondaryFg,          };   const primaryShadow =    tone === "primary"      ? Platform.select({          ios: {            shadowColor: "#000",            shadowOffset: { width: 0, height: 3 },            shadowOpacity: 0.14,            shadowRadius: 6,          },          android: { elevation: 3 },        })      : undefined;   return (    <Pressable      className={cn(        props.compact          ? "min-h-[42px] flex-row items-center justify-center gap-1.5 rounded-[14px] px-3.5 py-2.5"          : "min-h-[48px] flex-row items-center justify-center gap-2 rounded-[16px] px-4 py-3",      )}      disabled={props.disabled}      onPress={props.onPress}      style={[        {          backgroundColor: colors.backgroundColor,          borderWidth: tone === "primary" ? 0 : 1,          borderColor: colors.borderColor,          opacity: props.disabled ? 0.5 : 1,        },        primaryShadow,      ]}    >      <SymbolView        name={props.icon}        size={props.compact ? 13 : 14}        tintColor={colors.textColor}        type="monochrome"      />      <Text        className="text-xs font-t3-bold uppercase"        style={{ color: colors.textColor, letterSpacing: 0.8 }}      >        {props.label}      </Text>    </Pressable>  );}