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

const page = usePage()

const pageTitle = computed(() => {
  return page.props?.title || ''
})
</script>

<template>
  <div class="min-h-screen flex flex-col">
    <PageHeader :title="pageTitle" />
    <FlashNotification />

    <!-- Growth symbol watermark -->
    <img
      src="/images/growth-symbol.png"
      alt=""
      aria-hidden="true"
      class="fixed bottom-0 right-0 w-[600px] translate-x-[15%] translate-y-[15%] opacity-[0.03] pointer-events-none select-none z-0"
    />

    <main class="flex-1 relative z-10">
      <slot />
    </main>
  </div>
</template>
