<script setup>
import { computed } from 'vue'
import { usePage } from '@inertiajs/vue3'
import AppLogo from '@/Components/AppLogo.vue'

defineProps({
  title: {
    type: String,
    default: '',
  },
})

const page = usePage()
const logoHref = computed(() => page.props.auth?.logo_href ?? '/')
</script>

<template>
  <header class="sticky top-0 z-50 bg-surface border-b border-gray-700">
    <div class="px-6 py-4 flex items-center gap-6">
      <a :href="logoHref" class="flex items-center">
        <AppLogo class="text-2xl" />
      </a>
      <h1 v-if="title" class="text-xl font-semibold text-white">
        {{ title }}
      </h1>
    </div>
  </header>
</template>
