<template>
  <aside class="sidebar-steps">
    <div class="sidebar-steps__mobile-logo">
      <img :src="logoPinkishRed" alt="مدرسه بانو" />
    </div>
    <div class="sidebar-steps__panel">
      <div class="sidebar-steps__logo">
        <img :src="logoWhite" alt="مدرسه بانو" />
      </div>
      <ul class="sidebar-steps__list">
        <li
          v-for="tab in tabs"
          :key="tab.key"
          class="sidebar-steps__item"
          :class="{ 'sidebar-steps__item--active': activeTab === tab.key }"
          @click="emit('update:active-tab', tab.key)"
        >
          <SvgIcon :name="tab.icon" :size="22" color="#fff" />
        </li>
      </ul>
      <SidebarLogout color="#fff" stacked />
    </div>
  </aside>
</template>

<script setup>
import { gallery } from '@/utils/gallery'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import SidebarLogout from '@/layouts/sidebars/SidebarLogout.vue'

defineProps({
  tabs: { type: Array, required: true },
  activeTab: { type: String, default: '' },
})

const emit = defineEmits(['update:active-tab'])

const logoWhite = gallery.logoWhite
const logoPinkishRed = gallery.logoPinkishRed
</script>

<style lang="scss" scoped>
.sidebar-steps {
  height: 100%;

  &__mobile-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;

    img {
      height: 2.5rem;
      object-fit: contain;
    }

    @media (min-width: 1024px) {
      display: none;
    }
  }

  &__panel {
    background: var(--color-primary);
    border-radius: 1rem;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;

    @media (min-width: 1024px) {
      // Fill the full-height column only on desktop; on mobile the panel is a
      // content-height bar, so height:100% would overflow past the logo above it
      // and collide with the page heading.
      height: 100%;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
      padding: 1.25rem 0.75rem;
      border-radius: 1.5rem;
    }
  }

  &__logo {
    display: none;

    @media (min-width: 1024px) {
      display: flex;
      justify-content: center;
      padding-top: 0.5rem;
    }

    img {
      height: 3.5rem;
      object-fit: contain;
    }
  }

  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex: 1;

    @media (min-width: 1024px) {
      flex-direction: column;
      justify-content: flex-start;
      gap: 1.25rem;
      padding-top: 1rem;
    }
  }

  &__item {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;

    &--active,
    &:hover {
      opacity: 1;
    }
  }
}
</style>
