<script setup lang="ts">
import Card from '@/components/card.vue'
import { frame } from '@/core/libs/svgs'

defineProps({
  customClass: {
    type: String,
    default: () => '',
  },
})
</script>
<template>
  <card :custom-class="[customClass, 'p-0!']">
    <view class="relative">
      <img
        class="w-[347px] h-[202px] rounded-tl-2xl rounded-tr-2xl vertical-bottom"
        src="https://via.placeholder.com/347x202"
      />
      <div class="absolute top-4 right-4 px-2.5 bg-black/30 rounded-[20px] backdrop-blur-[15px]">
        <div class="text-white text-xs font-normal font-['PingFang SC'] leading-relaxed">
          已结束
        </div>
      </div>
      <div
        class="absolute top-4 left-4 px-2.5 rounded-md border border-solid border-white justify-center items-center gap-2.5 inline-flex"
      >
        <div class="text-white text-xs font-normal font-['PingFang SC'] leading-normal">第18期</div>
      </div>
    </view>
    <div class="p-5 bg-white rounded-bl-[20px] rounded-br-[20px] shadow">
      <div
        class="w-[244px] text-black/40 text-base font-normal font-['PingFang SC'] leading-normal"
      >
        白衣剑客·这是格斗的“芭蕾”
      </div>
      <view class="flex items-center mb-4">
        <wd-img custom-class="vertical-bottom" :src="frame" width="20" height="20"></wd-img>
        <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-[34px]">
          07.15 14:20
        </div>
      </view>
      <view class="flex">
        <div
          class="inline-block px-2.5 rounded-md border border-solid border-black/30 backdrop-blur-[6px] flex justify-center items-center"
        >
          <div class="text-black/60 text-xs font-normal font-['PingFang SC'] leading-normal">
            举办方：筑巢荟
          </div>
        </div>
      </view>
    </div>
  </card>
</template>
