<template>
  <!-- Arka plan resmi tam genişlikte section uzerine uygulanir -->
  <section class="page-title" :style="props.image && imageType === 'background'
    ? { backgroundImage: `url(${props.image})`, backgroundSize: 'cover', backgroundPosition: 'center' }
    : undefined" :class="{ 'has-bg-image': props.image && imageType === 'background' }">
    <div class="container">
      <div class="page-title-row">
        <!-- Inline resim secenegi -->
        <img v-if="props.image && imageType === 'inline'" :src="props.image" alt="page image"
          class="page-title-image" />

        <div class="page-title-content">
          <h1 :style="props.color ? { color: props.color } : undefined">{{ props.title }}</h1>
          <span v-if="props.subtitle" :style="props.color ? { color: props.color } : undefined">{{ props.subtitle
            }}</span>
        </div>

        <nav v-if="props.breadcrumbs?.length" aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li v-for="(item, i) in props.breadcrumbs" :key="i" class="breadcrumb-item"
              :class="{ active: i === props.breadcrumbs.length - 1 }"
              :aria-current="i === props.breadcrumbs.length - 1 ? 'page' : undefined">
              <a v-if="i < props.breadcrumbs.length - 1" :href="item.href">{{ item.label }}</a>
              <template v-else>{{ item.label }}</template>
            </li>
          </ol>
        </nav>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
interface Breadcrumb {
  label: string
  href?: string
}

// Provide defaults for props that are not required
const props = defineProps<{
  title: string
  subtitle?: string
  breadcrumbs?: Breadcrumb[]
  // Banner'dan gelen renk (#ff2600 gibi hex deger)
  color?: string
  // Arka plan resim URL'si
  image?: string
  // Resmin kullanim sekli: background veya inline
  imageType?: 'background' | 'inline'
}>()

// computed ile reaktif imageType — prop async güncellendiğinde de doğru çalışır
const imageType = computed(() => props.imageType ?? 'background')
</script>

<style scoped>
/* Tam genislik arka plan - container disinda */
.page-title {
  width: 100%;
  min-height: 400px;
  display: flex;
  align-items: center;
  background-color: transparent;
}

.page-title.has-bg-image {
  color: #fff;
}

.page-title .container {
  width: 100%;
}

.page-title-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 40px 20px;
  min-height: 400px;
}

.page-title-image {
  max-width: 140px;
  max-height: 140px;
  object-fit: cover;
  margin-right: 20px;
  border-radius: 8px;
}

.page-title-content h1 {
  margin: 0 0 6px 0;
}

@media (max-width: 768px) {
  .page-title-row {
    flex-direction: column;
    text-align: center;
    min-height: 300px;
  }

  .page-title-image {
    margin: 0 0 12px 0;
  }
}
</style>
