<template>
    <div class="state">
        <div class="withdraw-status">
            <img :src="require('@/assets/svg/icon-withdraw-status.svg')" alt="" />
            <div>
                <div class="title">Withdrawal Processing</div>
                <div class="desc">
                    <p v-for="item,i in props.text"  v-bind:key="i">{{ item }}</p>
                </div>
            </div>
        </div>

        <div class="footer">
            <div class="confirm-btn" @click="clickBtn">
                Done
            </div>
        </div>
    </div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps({
    text: Array,
})
const emit = defineEmits(['on-done'])
function clickBtn() {
    emit('on-done')
}

</script>
<style lang="scss" scoped>
.state {
    width: 100%;
    height: 100%;
    position: relative;

    .withdraw-status {
        text-align: center;

        img {
            margin-top: 40px;
            margin-bottom: 34px;
        }

        .title {
            font-weight: 500;
            font-size: 20px;
            margin-bottom: 10px;
        }

        .desc {
            font-size: 15px;
            color: rgba($color: #000000, $alpha: 0.5);

            p {
                margin: 0;
                padding: 0;
            }
        }
    }

    .footer {
        border-top: 1px solid #DBDBDB;
        bottom: 0;
        height: 80px;
        display: flex;
        position: absolute;
        justify-content: center;
        width: 100%;
        bottom: 0;
        align-items: center;

        .confirm-btn {
            width: 343px;
            height: 46px;
            line-height: 46px;
            text-align: center;
            background: #1D9BF0;
            border-radius: 1000px;
            font-weight: 600;
            font-size: 18px;
            color: #fff;
            cursor: pointer;
        }
    }
}
</style>