<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import { SessionUser } from "@/components/session/token/SessionUser.vue";

const props = defineProps({
  expanded: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['update:expanded']);
const expandIcon = ref(null);
const toggleIsSelected = () => {
  emit('update:expanded', !props.expanded);
};
</script>

<template>
    <div v-if="props.expanded">
      <slot name="expandedContent"></slot>
    </div>
    <!-- Expander -->
    <div class="column is-12-desktop">
      <p
          class="has-text-centered"
          @click="toggleIsSelected"
          @mouseover="expandIcon.classList.add('has-text-link')"
          @mouseleave="expandIcon.classList.remove('has-text-link')"
      >
          <span class="icon is-small" style="color: #c7c7c7;">
            <i
                class="fas fa-angle-down fa-lg"
                :class="{ 'fa-rotate-180': props.expanded }"
                aria-hidden="true"
                ref="expandIcon"
            ></i>
          </span>
      </p>
    </div>
</template>

<style scoped>

</style>