import GetSvg from "@/assets/icons/svg/get.svg";
import { ThemedText } from "@/components/ThemedText";
import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
const ProRights = (props: { style?: StyleProp<ViewStyle> }) => {
    const { style } = props;
    return (
        <View style={[styles.proRights, style]}>
            <ThemedText style={{ fontSize: 12, color: "#4C320C", fontWeight: "700", width: "100%", textAlign: "center" }}>
                Enjoy MemoWake Pro Benefits
            </ThemedText>
            <View style={{ display: "flex", flexDirection: "column", }}>
                <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
                    <GetSvg style={{ marginTop: 8 }} />
                    <ThemedText style={{ fontSize: 12, fontWeight: '500', color: "#4C320C" }}>no advertisement</ThemedText>
                </View>
                <ThemedText style={{ fontSize: 10, color: "#AC7E35", marginLeft: 20 }}>There are no advertisements, so you can use the product with peace of mind.</ThemedText>
            </View>
            <View style={styles.itemContent}>
                <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
                    <GetSvg style={{ marginTop: 8 }} />
                    <ThemedText style={{ fontSize: 12, fontWeight: '500', color: "#4C320C" }}>Enjoy 1000 Bonus Credits Every Month</ThemedText>
                </View>
                <ThemedText style={{ fontSize: 10, color: "#AC7E35", marginLeft: 20 }}>Generate more memory pictures & videos and explore your past.</ThemedText>
            </View>
            <View style={styles.itemContent}>
                <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
                    <GetSvg style={{ marginTop: 8 }} />
                    <ThemedText style={{ fontSize: 12, fontWeight: '500', color: "#4C320C" }}>100GB of Cloud Storage</ThemedText>
                </View>
                <ThemedText style={{ fontSize: 10, color: "#AC7E35", marginLeft: 20 }}>Safely store your cherished photos, videos, and generated memories.</ThemedText>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    proRights: {
        padding: 16,
        gap: 8
    },
    itemContent: {
        display: "flex",
        flexDirection: "column",
    }
})

export default ProRights;