<script setup lang="ts">
import type { SectionBlock } from '~/types/site';

const props = defineProps<{ section: SectionBlock }>();

const { ctaPrimaryText, ctaSecondaryText, isDark } = useSectionContent(props.section);
const { isExternal, resolveLink } = useLinkResolver();

const primaryLink = computed(() => resolveLink(props.section.cta_primary_url));
const secondaryLink = computed(() => resolveLink(props.section.cta_secondary_url));
</script>

<template>
  <div v-if="primaryLink || secondaryLink" class="flex flex-wrap items-center gap-16px">
    <!-- 主 CTA -->
    <template v-if="primaryLink && ctaPrimaryText">
      <a
        v-if="isExternal(section.cta_primary_url)"
        :href="section.cta_primary_url"
        target="_blank"
        rel="noopener noreferrer"
        class="px-28px py-12px rounded-full text-sm font-medium transition-all"
        :class="isDark ? 'bg-white text-gray-900 hover:bg-gray-200' : 'bg-primary text-white hover:opacity-90'"
      >
        {{ ctaPrimaryText }}
      </a>
      <NuxtLink
        v-else
        :to="primaryLink"
        class="px-28px py-12px rounded-full text-sm font-medium transition-all"
        :class="isDark ? 'bg-white text-gray-900 hover:bg-gray-200' : 'bg-primary text-white hover:opacity-90'"
      >
        {{ ctaPrimaryText }}
      </NuxtLink>
    </template>

    <!-- 次 CTA -->
    <template v-if="secondaryLink && ctaSecondaryText">
      <a
        v-if="isExternal(section.cta_secondary_url)"
        :href="section.cta_secondary_url"
        target="_blank"
        rel="noopener noreferrer"
        class="px-28px py-12px rounded-full text-sm font-medium border transition-all"
        :class="isDark ? 'border-white/40 text-white hover:bg-white/10' : 'border-gray-300 text-gray-700 hover:border-primary hover:text-primary dark:border-dark-600 dark:text-gray-200'"
      >
        {{ ctaSecondaryText }}
      </a>
      <NuxtLink
        v-else
        :to="secondaryLink"
        class="px-28px py-12px rounded-full text-sm font-medium border transition-all"
        :class="isDark ? 'border-white/40 text-white hover:bg-white/10' : 'border-gray-300 text-gray-700 hover:border-primary hover:text-primary dark:border-dark-600 dark:text-gray-200'"
      >
        {{ ctaSecondaryText }}
      </NuxtLink>
    </template>
  </div>
</template>
