<script setup>
import { defineProps, useSlots } from 'vue';
import { useRouter } from 'vue-router';
import { ref } from 'vue';

const props = defineProps({
  module: String,
  title: String,
  subtitle: String,
  icon: String,
  isSkeleton: Boolean,
});

const isExpanded = ref(false);
const skeletonSpaces = (length) => {
  // Create a string with non-breaking spaces
  return Array.from({ length }, () => '\u00A0').join('');
};
</script>

<template>
  <div class="card">
    <header class="card-header is-clickable" @click="isExpanded = !isExpanded">
      <p class="card-header-icon" v-if="props.icon">
        <span class="icon">
          <i :class="props.icon"></i>
        </span>
      </p>
      <p class="card-header-title">
        <span class="has-text-warning" :class="{ 'is-skeleton': isSkeleton }">
          {{ props.isSkeleton ? skeletonSpaces(8) : props.module }}
        </span>
        <span v-if="props.module">
          <strong>&nbsp;→&nbsp;</strong>
        </span>
        <span class="has-text-grey" :class="{ 'is-skeleton': isSkeleton }">
        {{ props.isSkeleton ? skeletonSpaces(8) : props.title }}
        </span>
        <!-- If a subtitle is defined, then show it -->
        <span v-if="props.subtitle" class="has-text-grey-light" :class="{ 'is-skeleton': isSkeleton }">
          <strong v-if="props.title">&nbsp;→&nbsp;</strong>
          {{ props.isSkeleton ? skeletonSpaces(8) : props.subtitle }}
        </span>
      </p>
      <a class="card-header-icon" aria-label="more options">
        <span class="icon">
          <i class="fas fa-angle-down" aria-hidden="true" :class="{'fa-rotate-180': isExpanded}"></i>
        </span>
      </a>
    </header>
    <div class="card-content" v-show="isExpanded">
      <div class="content">
        <slot name="default"></slot>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>