<template>
  <div class="relative border-b-2 border-gray-100 bg-white">
    <div class="mx-auto max-w-7xl px-5">
      <div
        class="flex items-center justify-between py-5 md:justify-start md:space-x-10"
      >
        <div class="flex w-0 justify-start md:mr-4">
          <router-link to="/"><HomeIcon class="h-8 w-8" /></router-link>
        </div>

        <div class="-my-2 -mr-2 md:hidden">
          <button
            type="button"
            class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
            aria-expanded="false"
          >
            <span class="sr-only">Open menu</span>
            <Bars3Icon class="h-6 w-6" />
          </button>
        </div>

        <nav class="hidden space-x-10 md:flex">
          <Dropdown title="My Buildings">
            <div class="relative bg-white pt-4 pb-4 sm:gap-5">
              <template v-for="building of buildings">
                <Building :building="building" />
              </template>
            </div>
          </Dropdown>
          <button
            type="button"
            :class="[
              'text-gray-500',
              'inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
            ]"
          >
            <span>Groups</span>
          </button>
        </nav>

        <div class="hidden items-center justify-end md:flex md:flex-1 lg:w-0">
          <UserPill :user="user" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  HomeIcon,
  Bars3Icon,
  ChevronDownIcon,
  UserIcon,
} from '@heroicons/vue/24/outline';
import { storeToRefs } from 'pinia';
import { useUserStore } from '../../store/user.store';
import UserPill from './UserPill.vue';
import Dropdown from './Dropdown.vue';
import Building from './Building.vue';
import { useBuildingStore } from '../../store/building.store';
import { onMounted } from 'vue';
const userStore = useUserStore();
const buildingsStore = useBuildingStore();
const { user } = storeToRefs(userStore);
const { buildings } = storeToRefs(buildingsStore);

onMounted(() => {
  buildingsStore.getBuildings();
});
</script>
