<template>
  <header class="bg-white shadow p-4 flex justify-between items-center">
    <h2 class="text-xl font-semibold">Welcome, Atul</h2>
    <div class="flex items-center space-x-4">
      <span class="text-gray-700">🔔 Notifications</span>
      <span class="text-gray-700">👤 Profile</span>
      <button @click="logout" class="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-400">
        Logout
      </button>
    </div>
  </header>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { Client, Account } from 'appwrite'

// Appwrite client setup
const client = new Client()
client.setEndpoint('https://cloud.appwrite.io/v1').setProject('67e1445400053dca1d9b')
const account = new Account(client)

// Router
const router = useRouter()

// Logout function
const logout = async () => {
  try {
    await account.deleteSession('current')
    router.push('/') // Redirect to index.vue
  } catch (error) {
    console.error('Logout failed:', error.message)
  }
}
</script>
