<template>
    <div class="card mb-3">
        <h3>Offers</h3>
        <p>Enter Promo code. Limit of 1 offer per order </p>
        <div class="input-group">
            <input type="text" v-model="code" @change="getPromo"/>
            <div class="input-group-append"><button class="black">Apply</button></div>
                        <p v-if="error" class="error">{{ error[0]}}</p>

        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            "code" : "",
            error : []
        }
    },
    methods: {
        // getCode() {
        //     if(this.code === "") {
        //         this.error.push("Please enter propmo code")
        //     } else {
        //         this.error = []
        //     }
        // },
        // getPromo(e) {
        //     this.code = e.target.value
        // }
    }
}
</script>

<style scoped>
    p.error {
        color: red
    }
    .black {
            text-transform: capitalize;
    font-weight: 700;
    background-color: #000;
    color: #fff;
    border: 1px solid transparent;
    }
</style>