import React from "react";
import { Pressable, Switch, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useColorScheme } from "nativewind";
import { cn } from "../utils/cn";
import { MutedText, Text } from "./text";
/**
 * Horizontal row used inside settings dialogs / panels. Combines an icon
 * tile, label + optional subtitle, and a trailing switch *or* chevron.
 * `destructive` recolors the label + icon to the destructive token.
 */
export function SettingsRow({ icon, label, subtitle, onPress, showChevron, toggle, value, onValueChange, destructive, }) {
    const { colorScheme } = useColorScheme();
    const isDark = colorScheme === "dark";
    const Wrapper = onPress ? Pressable : View;
    // Toggle-mode rows tap-to-switch and also surface the switch
    // itself — both surfaces need the label as their accessible name
    // so a screen reader doesn't announce "Switch, on" with no
    // context. The Switch carries `accessibilityState` so AT can
    // announce the on/off state.
    const wrapperProps = onPress
        ? {
            onPress,
            accessibilityRole: "button",
            accessibilityLabel: label,
            ...(subtitle ? { accessibilityHint: subtitle } : {}),
        }
        : {};
    let iconColor;
    if (destructive) {
        iconColor = "#EF4444";
    }
    else if (isDark) {
        iconColor = "#FFFFFF";
    }
    else {
        iconColor = "#000000";
    }
    return (<Wrapper className="flex-row items-center border-b border-border px-3 py-3 last:border-b-0 dark:border-neutral-800" {...wrapperProps}>
      <View className="mr-3 h-8 w-8 items-center justify-center rounded-md bg-secondary dark:bg-neutral-800">
        <Ionicons name={icon} size={16} color={iconColor}/>
      </View>
      <View className="flex-1">
        <Text className={cn("text-sm font-medium", destructive ? "text-destructive dark:text-red-900" : "text-foreground")}>
          {label}
        </Text>
        {subtitle ? <MutedText className="text-xs">{subtitle}</MutedText> : null}
      </View>
      {toggle ? (<Switch value={value} onValueChange={onValueChange} accessibilityLabel={label} accessibilityState={{ checked: value === true }} trackColor={{
                false: isDark ? "#404040" : "#D4D4D4",
                true: isDark ? "#FFFFFF" : "#000000",
            }} thumbColor={isDark ? "#000000" : "#FFFFFF"}/>) : null}
      {showChevron ? (<Ionicons name="chevron-forward" size={16} color={isDark ? "#525252" : "#A3A3A3"}/>) : null}
    </Wrapper>);
}
/** Group container for `SettingsRow`s. Renders the section title + a
 *  bordered card around its children. */
export function SettingsSection({ title, destructive, children }) {
    return (<View>
      <Text className={cn("mb-2 text-xs font-semibold tracking-wider", destructive
            ? "text-destructive dark:text-red-900"
            : "text-muted-foreground dark:text-neutral-400")}>
        {title}
      </Text>
      <View className="rounded-lg border border-border bg-card dark:border-neutral-800 dark:bg-neutral-900/50">
        {children}
      </View>
    </View>);
}
//# sourceMappingURL=settings-row.jsx.map