<script setup>
// 接收 props
const props = defineProps({
  title: String,
  type: {
    type: String,
    default: 'purple-pink', // 默认渐变
  },
})

// 根据type返回不同的背景类名
const titleClass = computed(() => {
  switch (props.type) {
    case 'blue-green':
      return 'bg-gradient-to-r from-blue-400 via-green-500 to-teal-500'
    case 'orange-yellow':
      return 'bg-gradient-to-r from-orange-400 via-yellow-500 to-yellow-600'
    case 'red-purple':
      return 'bg-gradient-to-r from-red-500 via-purple-500 to-purple-600'
    default:
      return 'bg-gradient-to-r from-purple-400 via-pink-500 to-red-500'
  }
})

// 分割线颜色与背景对应
const lineClass = computed(() => {
  switch (props.type) {
    case 'blue-green':
      return 'bg-gradient-to-r from-blue-400 via-green-500 to-teal-500'
    case 'orange-yellow':
      return 'bg-gradient-to-r from-orange-400 via-yellow-500 to-yellow-600'
    case 'red-purple':
      return 'bg-gradient-to-r from-red-500 via-purple-500 to-purple-600'
    default:
      return 'bg-gradient-to-r from-purple-400 via-pink-500 to-red-500'
  }
})
</script>

<template>
  <div class="relative">
    <!-- 标题部分 -->
    <div :class="titleClass" class="inline-block rounded-lg px-2 py-1 text-white font-bold shadow-md">
      {{ title }}
    </div>

    <!-- 左上角修饰 -->
    <div class="absolute left-0 top-0 h-4 w-4 transform rounded-full bg-white shadow-md -translate-x-2 -translate-y-2" />

    <!-- 分割线 -->
    <div class="relative mt-1.5">
      <div :class="lineClass" class="h-[2px] w-full rounded" />
    </div>
  </div>
</template>

<style scoped>
</style>
