<template>
  <div class="bg-gradient-to-br from-green-50 via-teal-50 to-blue-50 min-h-screen pb-16">
    <GradientHeader
      :title="title"
      :showBackButton="showBackButton"
      :onBack="handleBack"
      :rightContent="rightContent"
    />
    <main class="pb-16">
      <slot></slot>
    </main>
    <BottomNav />
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
import BottomNav from './BottomNav.vue'
import GradientHeader from '../ui/GradientHeader.vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  showBackButton: {
    type: Boolean,
    default: false
  },
  onBack: {
    type: Function,
    default: null
  },
  rightContent: {
    type: Object,
    default: null
  }
})

const handleBack = () => {
  if (props.onBack) {
    props.onBack()
  } else {
    window.history.back()
  }
}
</script>