import GetSvg from "@/assets/icons/svg/get.svg";
import { ThemedText } from "@/components/ThemedText";
import { useTranslation } from "react-i18next";
import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
const ProRights = (props: { style?: StyleProp<ViewStyle> }) => {
    const { style } = props;
    const { t } = useTranslation();
    return (
        <View style={[styles.proRights, style]}>
            <ThemedText style={{ fontSize: 12, color: "#4C320C", fontWeight: "700", width: "100%", textAlign: "center" }}>
                {t('rights.proTitle', { ns: 'personal' })}
            </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" }}>{t('rights.noAd', { ns: 'personal' })}</ThemedText>
                </View>
                <ThemedText style={{ fontSize: 10, color: "#AC7E35", marginLeft: 20 }}>{t('rights.noAdText', { ns: 'personal' })}</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" }}>{t('rights.bonus', { ns: 'personal' })}</ThemedText>
                </View>
                <ThemedText style={{ fontSize: 10, color: "#AC7E35", marginLeft: 20 }}>{t('rights.bonusText', { ns: 'personal' })}</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" }}>{t('rights.storage', { ns: 'personal' })}</ThemedText>
                </View>
                <ThemedText style={{ fontSize: 10, color: "#AC7E35", marginLeft: 20 }}>{t('rights.storageText', { ns: 'personal' })}</ThemedText>
            </View>
        </View>
    );
}

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

export default ProRights;