<script setup>
import PrimaryButton from "@/components/Buttons/PrimaryButton.vue";

defineProps({
  accountDetails: {
    type: Object,
    required: true,
  },
});
</script>

<template>
  <div class="border-b border-solid border-gray-200 pb-5">
    <span class="text-xl font-semibold">Plan Bilgileri</span>
    <div class="w-full flex justify-between">
      <div class="w-1/2">
        <div class="mt-2 text-lg">
          <span class="text-green-600 font-semibold">{{
            accountDetails.plan.base.title
          }}</span>
          plan kullanmaktasınız.
        </div>
        <div class="mt-2">
          Kullanım süreniz
          <span class="text-red-600">{{ accountDetails.plan.expires_at }}</span>
          tarihinde sona erecektir. Yeni bir plana geçiş yaparak uygulamayı
          kullanmaya devam edebilirsiniz.
        </div>
        <PrimaryButton
          target="_blank"
          link="https://app.kargoentegrator.com/settings/billing/plan"
          class="max-w-fit mt-5"
        >
          🚀 Hemen Yükselt
        </PrimaryButton>
      </div>
      <div class="w-1/2">
        <div class="relative w-48 h-48">
          <div
            class="absolute top-0 left-0 w-full h-full rounded-full bg-gray-200"
          ></div>
          <div
            class="absolute top-0 left-0 w-full h-full rounded-full"
            :style="{
              background: `conic-gradient(
                   rgb(59, 59, 152) ${(accountDetails.plan.usage_limit / accountDetails.plan.base.usage_limit) * 100}%,
                  rgb(230, 230, 230) ${(accountDetails.plan.usage_limit / accountDetails.plan.base.usage_limit) * 100}%
                )`,
            }"
          ></div>
          <div
            class="absolute inset-4 flex items-center justify-center rounded-full bg-white"
          >
            <p class="text-xl font-bold">
              {{ accountDetails.plan.usage_limit }}/{{
                accountDetails.plan.base.usage_limit
              }}<span class="text-sm font-light"></span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
