<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-200 bg-white p-6 shadow-sm">
    <div class="space-y-4">
      <button
        type="button"
        class="w-full rounded-xl border-2 border-emerald-600 bg-emerald-600 px-6 py-4 text-base font-semibold text-white transition hover:bg-white hover:text-emerald-600 disabled:cursor-not-allowed disabled:opacity-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-200 bg-rose-50 px-4 py-3 text-sm text-rose-700"
      >
        {{ props.checkoutError }}
      </div>
    </div>
  </section>
</template>
