<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="payment-step">
    <v-card-text class="pa-8 text-center">
      <div class="success-container">
        <v-icon icon="mdi-check-circle" size="80" class="text-orange mb-4" />
        <h2 class="text-h4 mb-4 font-weight-bold text-dark">Pembayaran Berhasil</h2>
        <p class="text-h6 text-grey-darken-1 mb-6">
          Silahkan Menunggu Bukti<br >Pembayaran
        </p>
        <v-btn color="primary" size="large" variant="flat" rounded="xl" @click="paymentStore.reset">
          Kembali ke Awal
        </v-btn>
      </div>
    </v-card-text>
  </div>
</template>

<script setup>
import { usePaymentStore } from '~/stores/payment';
const paymentStore = usePaymentStore();
</script>

<style scoped>

.payment-step {
  background: rgb(233, 233, 233);
}
.success-container {
  padding: 40px 20px;
}
.text-orange {
  color: #ff9800 !important;
}
.text-dark {
  color: #424242 !important;
}
</style>