<script setup lang="ts">
const baseApiUrl = useBaseApiUrl();
const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
</script>

<template>
  <UModal title="API Documentation">
    <template #body>
      <div class="flex flex-col space-y-8">
        <p>
          You can easily generate QRCodes by using the API, with no rate
          limitation.
          <br />
          <br />
          If you are not sure how to use the API, you can fill the QRCode form
          and copy the generated API URL.
        </p>

        <div class="space-y-3">
          <h2 class="font-bold text-lg">Base API URL</h2>

          <UButtonGroup size="md" class="w-full">
            <UInput
              :model-value="baseApiUrl"
              size="md"
              class="w-full"
              disabled
              :ui="{ base: '!ps-12.5 !cursor-text font-mono' }"
            >
              <template #leading>
                <span
                  class="text-white dark:text-gray-900 bg-primary py-0.5 -mx-1 px-2 text-xs rounded-xs font-mono"
                  ><span class="translate-y-px inline-block">GET</span></span
                >
              </template>
            </UInput>
            <UButton
              color="neutral"
              variant="subtle"
              :icon="baseApiUrlIcon"
              @click="copyBaseApiUrl"
            />
          </UButtonGroup>
        </div>

        <div class="space-y-3">
          <h2 class="font-bold text-lg">Query parameters</h2>
          <div
            class="text-sm flex flex-col space-y-4 font-mono divide-y divide-gray-200 dark:divide-gray-800"
          >
            <div class="pt-1 pb-4 flex justify-between gap-x-5">
              <span class="text-primary font-semibold">format</span>
              <span class="text-slate-700 dark:text-slate-200 text-right">{{
                arrayToUnion(IMAGE_FORMATS)
              }}</span>
            </div>

            <div class="flex pb-4 justify-between gap-x-5">
              <span class="text-primary font-semibold">logo</span>
              <span class="text-slate-700 dark:text-slate-200 text-right">{{
                arrayToUnion(LOGOS)
              }}</span>
            </div>

            <div class="flex justify-between gap-x-5">
              <span class="text-primary font-semibold">content</span>
              <span class="text-slate-700 dark:text-slate-200 text-right"
                >string</span
              >
            </div>
          </div>
        </div>
      </div>
    </template>
  </UModal>
</template>
