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

export type UserConfig = {
  items?: MediaItem[]
  label?: string
  format?: 'inline' | 'stacked'
}

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="content-standard p-4 text-center md:p-0">
    <div
      class="items-center"
      :class="uc.format === 'stacked' ? 'block' : 'inline-flex space-x-14'"
    >
      <div
        class="ui-font-title"
        :class="
          uc.format === 'stacked'
            ? 'text-xl mb-16 font-medium'
            : 'text-sm font-semibold'
        "
      >
        {{ uc.label }}
      </div>
      <div
        class="items-center gap-y-10 text-center md:gap-x-[3%]"
        :class="
          uc.format === 'stacked'
            ? `flex justify-center flex-wrap`
            : 'md:inline-flex'
        "
      >
        <a
          v-for="(logo, i) in uc.items"
          :key="i"
          :href="logo.href"
          class="hover:text-theme-500 logo-link  flex items-center justify-center"
          :class="uc.format === 'stacked' ? `w-[17%]` : ''"
          target="_blank"
          v-html="logo.media?.html"
        />
      </div>
    </div>
  </div>
</template>

<style lang="less">
.logo-link > * {
  max-width: 100%;
}
</style>
