<template>
    <touchable-opacity :onPress="action">
        <linear-gradient
                class="form-button"
                :colors="gradient"
                :start="[0.1, 1]"
                :end="[0.7, 0.2]"
        >
            <nb-spinner class="btn-spinner" v-if="waiting" small color="white" />
            <nb-text class="btn-text" v-if="!waiting">{{ title }}</nb-text>
        </linear-gradient>
    </touchable-opacity>

</template>

<script>
    import { LinearGradient } from "expo-linear-gradient";

    export default {
        name: "FormButton",
        components: {
            LinearGradient
        },
        props: {
            waiting: Boolean,
            gradient: Array,
            action: Function,
            title: String
        }
    }
</script>

<style scoped>
    .form-button {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        border-radius: 10px;
        height: 50px;
    }

    .btn-text {
        width: 100%;
        text-align: center;
        text-transform: uppercase;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
    }

    .btn-spinner {
        height: 50px;
    }
</style>