<script lang="ts" setup>
import { twMerge } from 'tailwind-merge'
import type { NavSecondaryItem } from '../nav/Secondary.vue'

defineProps<{
  navSecondary?: NavSecondaryItem[]
  contentClass?: string
}>()
</script>

<template>
  <div class="flex flex-1 flex-col p-8 page-bg-gradient">
    <!-- <h1 class="pl-2 text-xl font-medium">外部标题</h1> -->
    <slot name="subnav">
      <NavSecondary
        v-if="navSecondary && navSecondary.length"
        :navs="navSecondary"
      />
    </slot>
    <div
      class="h-full rounded-lg shadow-sm overflow-hidden relative"
      :class="twMerge('bg-white dark:bg-neutral-900 p-8 z-20', contentClass)"
    >
      <slot />
    </div>
  </div>
</template>

<style scoped>
.page-bg-gradient {
  @apply bg-gradient-to-br from-[#D5DEF9]/50 to-[#D6C9F9]/50;
  @apply dark:from-[#36477A]/50 dark:to-[#7C6DA6]/50;
}
</style>
