<script setup>
import { ref, onMounted } from "vue";
import PageWidget from "./components/PageWidget/PageWidget.vue";
import PopupWidget from "./components/PopupWidget/PopupWidget.vue";
import ReviewWidget from "./components/ReviewWidget/ReviewWidget.vue";

const reviewWidget = ref();

const params = ref({
  api_key: "live_Y9NOIkd7E1oLvWrBHigGQ5ZaJw6EePE0nZgzGWmK",
  customer: {
    unique_id: "1feb65de-ec04-48f5-bd34-46598044545",
    first_name: "Boba",
    last_name: "Fet",
    email: "boba@startwars.net",
    phone_number: "6082228787",
  },
});

const onClose = () => {
  console.log("close");
};

onMounted(async () => {
  // await reviewWidget.value.mount(params.value);
  reviewWidget.value.fireEvent("payment:1", params.value);
});
</script>

<template>
  <div>
    <lauded-page-widget
      api-key="Y9NOIkd7E1oLvWrBHigGQ5ZaJw6EePE0nZgzGWmK"
    ></lauded-page-widget>
    <lauded-popup-widget
      api-key="Y9NOIkd7E1oLvWrBHigGQ5ZaJw6EePE0nZgzGWmK"
    ></lauded-popup-widget>

    <lauded-review-widget
      id="reviewWidget"
      ref="reviewWidget"
      @close="onClose"
    />
  </div>
</template>
