<template>
  <div class="rounded-lg border p-5">
    <div class="flex items-start justify-between mb-6">
      <div>
        <p class="text-sm text-ink-gray-5">Current Plan</p>
        <h2 class="text-2xl font-semibold text-ink-gray-9">
          {{ subscription.plan }}
        </h2>
      </div>
      <Button variant="subtle">Change Plan</Button>
    </div>

    <div class="grid gap-6 sm:grid-cols-3">
      <div>
        <p class="text-sm text-ink-gray-5">Monthly Cost</p>
        <p class="text-xl font-semibold text-ink-gray-9">
          {{ subscription.price }}
          <span class="text-sm font-normal text-ink-gray-5">
            / {{ subscription.period }}
          </span>
        </p>
      </div>
      <div>
        <p class="text-sm text-ink-gray-5">Next Billing Date</p>
        <p class="text-xl font-semibold text-ink-gray-9">
          {{ subscription.nextBillingDate }}
        </p>
      </div>
      <div>
        <p class="text-sm text-ink-gray-5">Sites</p>
        <p class="text-xl font-semibold text-ink-gray-9">
          {{ subscription.sites }}
          <span class="text-sm font-normal text-ink-gray-5">
            / {{ subscription.maxSites }}
          </span>
        </p>
      </div>
    </div>

    <div class="mt-6 pt-6 border-t">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <div class="h-2 w-2 rounded-full bg-green-500"></div>
          <span class="text-sm text-ink-gray-7">Subscription Active</span>
        </div>
        <Button variant="ghost" theme="red">Cancel Subscription</Button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Button } from 'frappe-ui'

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