<template>
  <div>
    <NavBar />
    <div class="navsearch_container container-fluid">
      <NuxtLink to="/admin/cooperativas"> Administrar cooperativas </NuxtLink>
      <NuxtLink to="/admin/importar"> Alta de cooperativas por .csv </NuxtLink>
      <NuxtLink to="/admin/estadisticas"> Estadísticas </NuxtLink>
      <button @click="handleLogout" class="logout-link">Cerrar sesión</button>
      <!-- <NuxtLink to="/" @click="handleLogout">Cerrar sesión</NuxtLink> -->
    </div>
    <NuxtPage />
  </div>
</template>

<script>
import { useAuthStore } from '@/stores/auth'
import { mapActions } from 'pinia'
export default {
  setup() {
    const auth = useAuthStore();
    return {
      auth,
    }
  },
  methods: {
    ...mapActions(useAuthStore, ['logout']),
    async handleLogout() {
      try {
        await this.logout()
        this.$router.push('/')
      } catch (error) {
        console.error('Error logging out:', error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.navsearch_container {
  border-bottom: 3px solid $color-grey-nav;
  text-align: center;
  padding: 20px 20px;

  a, button {
    font-size: $m;
    font-weight: $bold;
    color: $color-navy;
    text-decoration: none;
  }
  a:nth-child(1):after,
  a:nth-child(2):after,
  a:nth-child(3):after,
  button:nth-child(1):after,
  button:nth-child(2):after,
  button:nth-child(3):after,
  button:nth-child(4):after {
    color: $color-navy;
    content: '\22EE';
    margin: 0.5rem;
  }
}
</style>
