import { View, Text, Pressable, Switch } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useTheme, useThemeToggle } from "../theme";

export function ThemeToggleRow() {
  const theme = useTheme();
  const { isDarkMode, toggleTheme } = useThemeToggle();

  return (
    <Pressable
      accessible
      accessibilityLabel={isDarkMode ? "Префрли на светол режим" : "Префрли на темен режим"}
      accessibilityRole="button"
      onPress={toggleTheme}
      style={{
        flexDirection: "row",
        alignItems: "center",
        gap: theme.spacing.md,
        padding: theme.spacing.lg,
      }}
    >
      <View style={{ width: 36, height: 36, borderRadius: 18, backgroundColor: theme.colors.surfaceAlt, alignItems: "center", justifyContent: "center" }}>
        <Ionicons
          name={isDarkMode ? "moon" : "sunny"}
          size={20}
          color={theme.colors.textSecondary}
        />
      </View>
      <Text style={{ ...theme.typography.body, color: theme.colors.text, flex: 1 }}>
        {isDarkMode ? "Светол режим" : "Темен режим"}
      </Text>
      <Switch
        value={isDarkMode}
        onValueChange={toggleTheme}
        trackColor={{ false: theme.colors.borderLight, true: theme.colors.primaryLight }}
        thumbColor={isDarkMode ? theme.colors.primary : theme.colors.textTertiary}
      />
    </Pressable>
  );
}