<script lang="ts" setup>
import ElUi from '@factor/engine/ui/ElUi.vue'
import { vue } from '@factor/api'
import type { Card } from '../card'

export type UserConfig = {
  title?: string
  subTitle?: string
  badge?: string
  actions?: {
    text?: string
    href?: string
    onClick?: () => void
  }[]
}
const props = defineProps({
  card: {
    type: Object as vue.PropType<Card<UserConfig>>,
    required: true,
  },
})

const uc = vue.computed(() => {
  return props.card.userConfig.value || {}
})
</script>

<template>
  <div class=" ">
    <div class="mx-auto max-w-6xl px-6 lg:px-8">
      <div class="mx-auto text-center">
        <h2
          v-if="uc.badge"
          class="text-theme-400 mb-6 font-sans text-sm font-medium uppercase tracking-wide"
          v-html="uc.badge"
        />
        <h1
          class="ui-font-title text-4xl font-bold tracking-tighter lg:text-7xl"
          v-html="uc.title"
        />
        <p
          class="mt-6 text-xl lg:text-3xl lg:leading-snug"
          v-html="uc.subTitle"
        />
        <div class="mt-10 flex items-center justify-center gap-x-6">
          <ElUi
            v-for="(action, i) in uc.actions"
            :key="i"
            ui="button"
            btn="primary"
            :href="action.href"
            size="xl"
          >
            {{ action.text }}
          </ElUi>
        </div>
      </div>
    </div>
  </div>
</template>
