<script lang="ts" setup>
import type { VisitorRole } from "~/types";

const route = useRoute();
const gstate = useGState();

onMounted(() => {
  if (route.query?.role) {
    if (
      route.query.role !== "stu" &&
      route.query.role !== "tea" &&
      route.query.role !== "fans"
    ) {
      return;
    }
    gstate.setCurrentRole(route.query.role as VisitorRole);
  }
});

// const items = ref([
//   {
//     label: 'Backlog',
//     value: 'backlog',
//     icon: 'i-lucide-circle-help'
//   },
//   {
//     label: 'Todo',
//     value: 'todo',
//     icon: 'i-lucide-circle-plus'
//   },
//   {
//     label: 'In Progress',
//     value: 'in_progress',
//     icon: 'i-lucide-circle-arrow-up'
//   },
//   {
//     label: 'Done',
//     value: 'done',
//     icon: 'i-lucide-circle-check'
//   }
// ])
// const value = ref(items.value[0])
</script>

<template>
  <div class="w-full h-full flex flex-col dark:bg-neutral-900/80">
    <div
      class="sticky top-0 w-full px-4 py-3 bg-white/30 backdrop-blur-2xl z-30 dark:bg-neutral-900/80"
    >
      <h1 class="font-medium">{{ gstate.botName }}</h1>
      <!-- <USelectMenu v-model="value"  color="primary" variant="none" :items="items" class="w-48" size="lg"  :ui="{base: 'w-fit'}" /> -->
    </div>
    <slot></slot>
  </div>
</template>

<style>
body {
  background-image: url("~/assets/image/pattern/mesh-7.png");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
</style>
