import React from 'react'
import { View, TouchableOpacity, TextStyle, ViewStyle, StyleSheet, } from 'react-native'
import { BlurView } from '@react-native-community/blur'
import c from '../../color/colors'
import t from '../../translator/translator'


import { MyText, } from '../texts'


type Props = {
    containerViewStyle: ViewStyle,
    titleTextStyle: TextStyle,
    title: String,
    onPress: () => void,
}


export default BlurBtnView = (props: Props) =>
{

    return (
        <View
            style={ [styles.container, props.containerViewStyle] }
        >
            <BlurView
                style = { styles.blur }
                blurType = 'dark'
                blurAmount = { 10 }
            />

            <TouchableOpacity
                style = { styles.btn }
                onPress = { props.onPress }
            >
                <MyText style={ [styles.btnText, props.titleTextStyle] }>{ props.title }</MyText>

            </TouchableOpacity>
        </View>
    )
}
BlurBtnView.defaultProps = {

}



const styles = StyleSheet.create({
    container: {
        height: 48,
        borderRadius: 16,
        overflow: 'hidden',
    },
    btn: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 16,
    },
    btnText: {
        fontSize: 12,
        fontWeight: 'bold',
        color: c().main_white,
    },
    blur: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        borderWidth: 10,
        borderColor: 'yellow',
    },
})
