<script setup lang="ts">
const props = defineProps<{
  isCheckoutPending: boolean;
  checkoutPrice: number;
  checkoutError: string | null;
}>();

const emit = defineEmits<{
  (e: "checkout"): void;
}>();

const handleCheckout = () => emit("checkout");

const priceLabel = computed(() => props.checkoutPrice.toFixed(2));
</script>

<template>
  <section class="rounded-2xl border border-slate-800/60 bg-slate-900/80 p-6 shadow-lg shadow-slate-950/40">
    <div class="space-y-4">
      <button
        type="button"
        class="w-full rounded-xl bg-emerald-500 px-6 py-4 text-base font-semibold text-emerald-950 transition hover:bg-emerald-400 disabled:cursor-not-allowed disabled:bg-emerald-500/60 disabled:text-emerald-900/60"
        :disabled="props.isCheckoutPending"
        @click="handleCheckout"
      >
        {{ props.isCheckoutPending ? "Redirecting…" : `Buy This Design ($${priceLabel})` }}
      </button>
      <div
        v-if="props.checkoutError"
        class="rounded-xl border border-rose-500/60 bg-rose-500/10 px-4 py-3 text-sm text-rose-200"
      >
        {{ props.checkoutError }}
      </div>
    </div>
  </section>
</template>
