<template>
  <header class="bg-gradient-to-r from-green-50 to-blue-50 p-4 relative">
    <div class="flex items-center justify-between">
      <button
        v-if="showBackButton"
        @click="onBack"
        class="p-2 rounded-full bg-white/30 backdrop-blur-sm"
        aria-label="返回"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
      </button>
      <h1 :class="['text-xl font-medium text-center', showBackButton ? 'flex-1' : '']">
        {{ title }}
      </h1>
      <div v-if="rightContent" v-html="rightContent.content"></div>
    </div>
  </header>
</template>

<script setup>
import { defineProps } from 'vue'

defineProps({
  title: {
    type: String,
    required: true
  },
  showBackButton: {
    type: Boolean,
    default: false
  },
  onBack: {
    type: Function,
    default: () => {}
  },
  rightContent: {
    type: Object,
    default: null
  }
})
</script>