<template>
  <div class="paymentHeight">
      <div class="payBody">
        <h1 v-if="route.query.Status === 'OK'">پرداخت با موفقیت انجام شد</h1>
        <h2 v-else>پرداخت ناموفق !</h2>
      <div class="buttons">
        <button class="acceptButton">
            <nuxt-link to="/">
                صفحه اصلی
            </nuxt-link>
        </button>
        <button 
         v-if="route.query.Status === 'OK'"
        class="showButton">
            <nuxt-link to="/account/my-courses">
                مشاهده
            </nuxt-link>
        </button>
      </div>
    </div>
  </div>
</template>


<script setup>
const route = useRoute();
console.log(route.query.Status === "OK");
</script>

<style>

.acceptButton {
    background-color: rgb(3, 181, 3);
    font-size: 14px;
    color: #fff;
    width: 100px;
    padding: 5px 0px;
    border-radius: 5px;
}
.showButton {
    background-color: rgb(181, 160, 3);
    font-size: 14px;
    color: #fff;
    width: 100px;
    padding: 5px 0px;
    border-radius: 5px;
}
.paymentHeight {
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.payBody {
  height: 160px;
  width: 400px;
  border: 1px solid rgb(205, 205, 205);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.payBody h1 {
  color: green;
}
.payBody h2 {
  color: red;
}
.buttons{
    display: flex;
    justify-content: space-between;
gap: 50px;
    margin-top: 30px;
}
</style>