<script lang="ts" setup>
import ElButton from '@factor/ui/ElButton.vue'
import { vue } from '@factor/api'
import type { ActionItem, ListItem } from '@factor/api'
import type { Card } from '../card'

export type UserConfig = {
  title?: string
  subTitle?: string
  items: ListItem[]
  actions: ActionItem[]
}

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="content-standard mx-auto px-6 lg:px-8">
      <div class="mb-16 flex items-end gap-36">
        <div
          class="ui-font-title w-[20em] text-4xl font-bold tracking-tighter sm:text-7xl"
          v-html="uc.title"
        />
        <div
          class="text-lg lg:text-3xl lg:leading-snug"
          v-html="uc.subTitle"
        />
      </div>
      <div class="grid grid-cols-3 gap-20">
        <div v-for="(item, i) in uc.items" :key="i">
          <div class="text-3xl font-bold">
            {{ item.name }}
          </div>
          <div class="mt-4 text-lg">
            {{ item.desc }}
          </div>
        </div>
      </div>
      <div class="mt-10 flex items-center justify-center gap-x-6">
        <ElButton
          v-for="(action, i) in uc.actions"
          :key="i"
          btn="primary"
          :href="action.href"
          size="xl"
        >
          {{ action.name }}
        </ElButton>
      </div>
    </div>
  </div>
</template>
