<template>
  <component
    :is="wrapperTag"
    v-bind="wrapperProps"
    class="learn-more-wrapper"
    @click="handleAsyncClick"
  >
    <el-card class="learn-more-card">
      <el-icon class="icon" size="80">
        <component :is="icon" />
      </el-icon>
      <br />
      {{ title }}
    </el-card>
  </component>
</template>

<script setup lang="ts">
  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    icon: {
      type: Object,
      default: null,
    },
    to: {
      type: String,
      default: null,
    },
    href: {
      type: [String, Function],
      default: null,
    },
  });

  // 包裹器标签
  const wrapperTag = computed(() => {
    if (props.to) return resolveComponent('NuxtLink');
    if (props.href) return 'a';
    return 'div';
  });

  // 包裹器属性
  const wrapperProps = computed(() => {
    // Nuxt 内部跳转
    if (props.to) {
      return { to: props.to };
    }

    // 外部跳转（字符串）
    if (typeof props.href === 'string') {
      return {
        href: props.href,
        target: '_blank',
        rel: 'noopener noreferrer',
      };
    }

    // 其他情况：href 是异步函数 → 不在这里处理
    return { href: '#' };
  });

  async function handleAsyncClick(event: Event) {
    if (typeof props.href === 'function') {
      event.preventDefault();
      const url = await props.href();
      window.open(url, '_blank', 'noopener,noreferrer');
    }
  }
</script>

<style scoped>
  .learn-more-card {
    width: 20%;
    min-width: 200px;
    padding: 20px;
    margin: 0 auto;
    cursor: pointer;
    text-align: center;
    font-size: 1.5em;
  }

  .learn-more-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  .icon {
    padding: 10px;
  }

  @media (max-width: 768px) {
    .learn-more-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    .learn-more-card {
      width: 80%;
      min-width: 0;
    }
  }
</style>
