import { View, Text, Pressable } from "react-native";
import { useSettings } from "../../../providers/WatchProvider";

export function SettingsScreen() {
  const { poolLength, setPoolLength } = useSettings();

  return (
    <View className="flex-1 bg-white p-4">
      <Text className="text-2xl font-bold text-slate-900 mb-6">Settings</Text>

      <View className="mb-6">
        <Text className="text-sm font-medium text-slate-500 mb-2">Default Pool Length</Text>
        <View className="flex-row gap-3">
          {[25, 50].map((len) => (
            <Pressable
              key={len}
              onPress={() => setPoolLength(len)}
              className={`flex-1 py-3 rounded-xl items-center ${
                poolLength === len ? "bg-sky-500" : "bg-slate-100"
              }`}
            >
              <Text
                className={`font-semibold ${
                  poolLength === len ? "text-white" : "text-slate-600"
                }`}
              >
                {len}m
              </Text>
            </Pressable>
          ))}
        </View>
      </View>

      <View className="border-t border-slate-200 pt-4 mt-2">
        <Text className="text-sm text-slate-400">SwimBuddy v1.0.0</Text>
      </View>
    </View>
  );
}