import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

interface CloseButtonProps {
    onPress?: () => void;
    visible?: boolean;
}

export const CloseButton: React.FC<CloseButtonProps> = ({ onPress, visible = true }) => {
    if (!visible) return null;

    const handlePress = () => {
        onPress?.();
    };

    return (
        <TouchableOpacity style={styles.closeButton} onPress={handlePress}>
            <Text style={styles.closeButtonText}>✕</Text>
        </TouchableOpacity>
    );
};

const styles = StyleSheet.create({
    closeButton: {
        position: 'absolute',
        top: 10,
        right: 10,
        width: 30,
        height: 30,
        borderRadius: 15,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 10001,
    },
    closeButtonText: {
        color: 'white',
        fontSize: 16,
        fontWeight: 'bold',
    },
});