<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'
import OrgSwitcher from './OrgSwitcher.vue'
import SearchBar from './SearchBar.vue'
import ThemeToggle from './ThemeToggle.vue'

defineEmits<{ close: [] }>()
const auth = useAuthStore()
</script>

<template>
  <div class="sm:hidden border-t border-border-light dark:border-slate-700">
    <div class="px-4 py-3 space-y-3">
      <router-link
        :to="`/app/${auth.org}/tasks`"
        class="block text-sm text-slate-600 dark:text-slate-400 hover:text-accent-400 transition-colors"
        @click="$emit('close')"
      >
        Tasks
      </router-link>
      <router-link
        :to="`/app/${auth.org}/editor`"
        class="block text-sm text-slate-600 dark:text-slate-400 hover:text-accent-400 transition-colors"
        @click="$emit('close')"
      >
        Editor
      </router-link>
      <OrgSwitcher v-if="auth.orgs.length > 1" />
      <SearchBar />
      <div v-if="auth.user" class="space-y-2">
        <div class="flex items-center justify-between">
          <router-link
            :to="`/app/${auth.org}/profile`"
            class="text-sm text-slate-600 dark:text-slate-400 hover:text-accent-400 transition-colors"
            @click="$emit('close')"
          >
            {{ auth.user.email }}
          </router-link>
          <a href="/auth/logout" class="text-sm text-slate-500 hover:text-accent-400 transition-colors">Logout</a>
        </div>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-sm text-slate-500">Theme</span>
        <ThemeToggle />
      </div>
    </div>
  </div>
</template>
