import React from 'react';
import { Image, Modal, Pressable, StyleSheet } from 'react-native';

const LcensesModal = (props: { modalVisible: boolean, setModalVisible: (visible: boolean) => void }) => {
    const { modalVisible, setModalVisible } = props;

    return (
        <Modal
            animationType="slide"
            transparent={true}
            visible={modalVisible}
            onRequestClose={() => {
                setModalVisible(!modalVisible);
            }}>
            <Pressable
                style={styles.centeredView}
                onPress={() => setModalVisible(false)}>
                <Pressable
                    style={styles.modalView}
                    onPress={(e) => e.stopPropagation()}
                >
                    <Image
                        source={{ uri: "https://cdn.fairclip.cn/files/7336715310751420416/2.png" }}
                        className="rounded-xl w-full h-full"
                        resizeMode="cover"
                    />
                </Pressable>
            </Pressable>

        </Modal>
    );
};

const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.5)',
    },
    container: {
        flex: 1,
    },
    modalView: {
        width: '100%',
        height: '40%',
        backgroundColor: 'white',
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
    },
    modalHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 20,
    },
    modalTitle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#4C320C',
    },
    closeButton: {
        fontSize: 28,
        color: '#4C320C',
        padding: 10,
    },
    modalContent: {
        flex: 1,
    },
    modalText: {
        fontSize: 16,
        color: '#4C320C',
    },
    premium: {
        backgroundColor: "#FAF9F6",
        padding: 16,
        borderRadius: 24,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    content: {
        flex: 1,
        flexDirection: 'column',
        gap: 4,
        backgroundColor: '#FAF9F6',
        borderRadius: 24,
        paddingVertical: 8
    },
    item: {
        paddingHorizontal: 16,
        paddingVertical: 8,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    itemText: {
        fontSize: 14,
        fontWeight: '600',
        color: '#4C320C',
    },
    upgradeButton: {
        backgroundColor: '#E2793F',
        borderRadius: 20,
        paddingHorizontal: 16,
        paddingVertical: 8,
    },
    upgradeButtonText: {
        color: '#fff',
        fontSize: 14,
        fontWeight: "600"
    },
    switchContainer: {
        width: 50,
        height: 30,
        borderRadius: 15,
        justifyContent: 'center',
        paddingHorizontal: 2,
    },
    switchOn: {
        backgroundColor: '#E2793F',
        alignItems: 'flex-end',
    },
    switchOff: {
        backgroundColor: '#E5E5E5',
        alignItems: 'flex-start',
    },
    switchCircle: {
        width: 26,
        height: 26,
        borderRadius: 13,
    },
    switchCircleOn: {
        backgroundColor: 'white',
    },
    switchCircleOff: {
        backgroundColor: '#A5A5A5',
    },
});
export default LcensesModal;