<template>
  <div class="mb-6">
    <Breadcrumb v-if="breadcrumbs && breadcrumbs.length" :crumbs="breadcrumbs" />
    <div class="flex items-center justify-between">
      <div>
        <div class="flex items-center gap-3">
          <router-link
            v-if="backTo"
            :to="backTo"
            class="text-gray-400 hover:text-gray-600"
          >
            <svg class="w-5 h-5" 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>
          </router-link>
          <h1 class="text-2xl font-bold text-gray-900">{{ title }}</h1>
          <slot name="meta"></slot>
        </div>
        <p v-if="subtitle" class="text-sm text-gray-500 mt-1">{{ subtitle }}</p>
      </div>
      <div class="flex items-center gap-2">
        <slot name="actions"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import Breadcrumb from '@/components/common/Breadcrumb.vue'

defineProps({
  title: {
    type: String,
    required: true
  },
  subtitle: {
    type: String,
    default: ''
  },
  backTo: {
    type: [String, Object],
    default: null
  },
  breadcrumbs: {
    type: Array,
    default: null
  }
})
</script>
