import GetSvg from "@/assets/icons/svg/get.svg";
import { ThemedText } from "@/components/ThemedText";
import { StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle } from "react-native";

interface Props {
    setUserType: (type: 'normal' | 'premium') => void;
    style?: StyleProp<ViewStyle>;
}

const Normal = (props: Props) => {
    const { setUserType } = props;

    return (
        <View style={[styles.normalInfo, props.style]}>
            <View style={styles.normalItem}>
                <View style={styles.normalItemContent}>
                    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
                        <GetSvg style={{ marginTop: 8 }} />
                        <ThemedText style={{ fontSize: 12, fontWeight: '500', color: "#4C320C" }}>Enjoy 100 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.normalItemContent}>
                    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
                        <GetSvg style={{ marginTop: 8 }} />
                        <ThemedText style={{ fontSize: 12, fontWeight: '500', color: "#4C320C" }}>10GB 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>
            <TouchableOpacity
                style={styles.goPro}
                onPress={async () => {
                    setUserType('premium');
                }}
                activeOpacity={0.8}
            >
                <ThemedText style={{ color: '#fff', fontWeight: '700', fontSize: 14 }}>
                    Go Premium
                </ThemedText>
            </TouchableOpacity>
        </View>
    );
}

export default Normal;
const styles = StyleSheet.create({
    goPro: {
        backgroundColor: '#E2793F',
        borderRadius: 24,
        paddingVertical: 6,
        display: "flex",
        alignItems: "center",
        width: "100%",
    },
    normalInfo: {
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        gap: 16
    },
    normalItem: {
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
        gap: 16
    },
    normalItemContent: {
        display: "flex",
        flexDirection: "column",
    }
});