<script lang="ts" setup>
defineProps({
  type: {
    type: String as PropType<'system' | 'user'>,
    required: true,
  },
  data: {
    type: Object as PropType<TitlesTemplate>,
    required: true,
  },
})

const emit = defineEmits({
  'user-titles-request': (_titles: TitlesTemplate) => true,
  'user-titles-delete': (_titles: TitlesTemplate) => true,
  'system-titles-delete': (_titles: TitlesTemplate) => true,
})

const loginState = useLoginState()
</script>

<template>
  <div
    class="relative w-full flex flex-col rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden shadow-none hover:shadow transition-shadow"
  >
    <NuxtImg
      placeholder
      placeholder-class="w-full aspect-[16/9] object-cover bg-neutral-200 dark:bg-neutral-800"
      class="w-full aspect-[16/9] object-cover relative"
      :src="data.opening_url"
    />
    <div class="relative p-2 flex justify-between items-center gap-2">
      <div class="flex-1">
        <h1
          class="text-base font-medium line-clamp-1"
          :title="data.title"
        >
          {{ data.title }}
        </h1>
        <p class="text-xs font-medium text-gray-400">
          {{ data.description }}
        </p>
      </div>
      <div>
        <UButtonGroup
          size="xs"
          v-if="type === 'system'"
        >
          <UButton
            label="使用模板"
            color="white"
            @click="emit('user-titles-request', data)"
          />
          <UButton
            icon="tabler:trash"
            color="red"
            @click="emit('system-titles-delete', data)"
            v-if="
              /** TODO: Temporarily disable this button */ false &&
              loginState.user.auth_code === 2
            "
          />
        </UButtonGroup>
        <UButtonGroup
          size="xs"
          v-if="type === 'user'"
        >
          <UButton
            icon="tabler:trash"
            label="删除素材"
            variant="soft"
            color="red"
            @click="emit('user-titles-delete', data)"
          />
        </UButtonGroup>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
