import { useState } from 'react';
import { Text, StyleSheet, Animated, Pressable } from "react-native";
import { useAuth } from '../context/AuthContext';
import { Ionicons } from '@expo/vector-icons';

export default function LogoutButton() {
    const { clearAuth } = useAuth();
    const [scale] = useState(new Animated.Value(1));

    const handlePress = async () => {
        // Animate button press
        Animated.sequence([
            Animated.spring(scale, {
                toValue: 0.95,
                useNativeDriver: true,
            }),
            Animated.spring(scale, {
                toValue: 1,
                useNativeDriver: true,
            })
        ]).start();

        await clearAuth();
    };

    return (
        <Animated.View style={{ transform: [{ scale }] }}>
            <Pressable 
                onPress={handlePress}
                style={({ pressed }) => [
                    styles.button,
                    pressed && styles.buttonPressed
                ]}
            >
                <Ionicons name="log-out-outline" size={20} color="#fff" />
                <Text style={styles.buttonText}>Logout</Text>
            </Pressable>
        </Animated.View>
    );
}

const styles = StyleSheet.create({
    button: {
        backgroundColor: '#dc3545',
        paddingHorizontal: 20,
        paddingVertical: 12,
        borderRadius: 8,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 8,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
    },
    buttonPressed: {
        backgroundColor: '#c82333',
    },
    buttonText: {
        color: '#fff',
        fontSize: 16,
        fontWeight: '600',
    },
});