import SettingSvg from '@/assets/icons/svg/setting.svg';
import { useTranslation } from 'react-i18next';
import { StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle } from "react-native";
import { ThemedText } from "../ThemedText";
interface CategoryProps {
    setModalVisible: (visible: boolean) => void;
    style?: StyleProp<ViewStyle>;
}

const AlbumComponent = ({ setModalVisible, style }: CategoryProps) => {
    const { t } = useTranslation();
    return (
        <View style={[styles.container, style]}>
            <TouchableOpacity style={{ flex: 3, opacity: 0 }}>
                <ThemedText style={styles.text}>{t('generalSetting.album', { ns: 'personal' })}</ThemedText>
            </TouchableOpacity>
            <TouchableOpacity style={{ flex: 3, opacity: 0 }}>
                <ThemedText style={styles.text}>{t('generalSetting.shareProfile', { ns: 'personal' })}</ThemedText>
            </TouchableOpacity>
            <TouchableOpacity
                onPress={() => {
                    setModalVisible(true);
                }}
                activeOpacity={0.7}
                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
                style={[styles.text, { flex: 1, alignItems: "center", paddingVertical: 6, zIndex: 999 }]}>
                <SettingSvg />
            </TouchableOpacity>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 16
    },
    text: {
        fontSize: 12,
        fontWeight: '700',
        color: '#AC7E35',
        borderColor: '#FFD18A',
        borderWidth: 1,
        borderRadius: 20,
        padding: 4,
        textAlign: "center",
    }
});

export default AlbumComponent;