import { Text, Animated, Pressable } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useRouter } from "expo-router";

import { useAuthContext } from "@/auth/AuthContext";

interface SignOutButtonProps {
  textOpacity: Animated.Value;
  iconTranslateX: Animated.Value;
  paddingLeft: Animated.Value;
}

export const SignOutButton = ({
  textOpacity,
  iconTranslateX,
  paddingLeft,
}: SignOutButtonProps) => {
  const router = useRouter();
  const { logout } = useAuthContext();
  const handleSignOut = async () => {
    try {
      await logout();
      router.replace("/sign-in");
    } catch (err) {
      console.error("Logout error:", err);
    }
  };
  return (
    <Animated.View
      style={{
        paddingLeft,
        paddingRight: 4,
      }}
    >
      <Pressable
        onPress={handleSignOut}
        className="flex-row items-center py-3 rounded-lg w-full justify-start"
      >
        <Animated.View
          style={{
            width: 32,
            alignItems: "center",
            transform: [{ translateX: iconTranslateX }],
          }}
        >
          <Ionicons name="log-out-outline" size={32} color="white" />
        </Animated.View>
        <Animated.View
          style={{
            opacity: textOpacity,
            marginLeft: 12,
            overflow: "hidden",
          }}
        >
          <Text className="text-white" numberOfLines={1}>
            Sign out
          </Text>
        </Animated.View>
      </Pressable>
    </Animated.View>
  );
};