<script setup lang="ts">
import { ref } from "vue";
import { useRoute } from "vue-router";

const router = useRoute();

interface Component {
  name: string;
  component_name: string;
}

const introduction = ref<Component[]>([
  {
    name: "Introdução",
    component_name: "Home",
  },
]);

const styles = ref<Component[]>([
  {
    name: "Cores",
    component_name: "colors",
  },
  {
    name: "Tipografia",
    component_name: "typography",
  },
]);

const components = ref<Component[]>([
  {
    name: "Avatar",
    component_name: "avatar",
  },
  {
    name: "Button",
    component_name: "buttons",
  },
  {
    name: "Modal",
    component_name: "modal",
  },
  {
    name: "Cards",
    component_name: "card",
  },
  {
    name: "Breadcrumb",
    component_name: "breadcrumb",
  },
  {
    name: "Sidebar",
    component_name: "sidebar",
  },
  {
    name: "Spinner",
    component_name: "spinner",
  },
  {
    name: "Dropdown",
    component_name: "dropdown",
  },
  {
    name: "Tag",
    component_name: "tag",
  },
]);
</script>

<template>
  <section>
    <!-- <h1>Introdução</h1> -->
    <ul>
      <li v-for="(component, index) in introduction" :key="index">
        <router-link
          :class="{ active: router.name === component.component_name }"
          :to="{ name: component.component_name }"
        >
          {{ component.name }}</router-link
        >
      </li>
    </ul>

    <h1>Estilos</h1>
    <ul>
      <li v-for="(component, index) in styles" :key="index">
        <router-link
          :class="{ active: router.name === component.component_name }"
          :to="{ name: component.component_name }"
        >
          {{ component.name }}</router-link
        >
      </li>
    </ul>

    <h1>Componentes</h1>
    <ul>
      <li v-for="(component, index) in components" :key="index">
        <router-link
          :class="{ active: router.name === component.component_name }"
          :to="{ name: component.component_name }"
        >
          {{ component.name }}</router-link
        >
      </li>
    </ul>
  </section>
</template>

<style lang="scss" scoped>
section {
  position: sticky;
  top: 0;
  width: var(--w-64);
  height: calc(100vh);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  box-shadow: var(--shadow);
  background: var(--gray-white);
  padding: var(--spacing-7) var(--spacing-0) var(--spacing-7) var(--spacing-20);

  @media (max-width: 768px) {
    width: var(--w-44);
    padding: var(--spacing-5) var(--spacing-5);
  }

  ul {
    display: grid;
    gap: var(--spacing-3);
    list-style: none;
    margin-top: var(--spacing-2);

    li {
      cursor: pointer;

      a {
        text-decoration: none;
        color: var(--gray-200);
        font-size: var(--font-base);
        font-weight: var(--weight-medium);
        transition: var(--transition);

        &.active {
          color: var(--primary-500);

          &:hover {
            opacity: 1;
          }
        }

        &:hover {
          opacity: 0.7;
          color: var(--primary-500);
        }
      }
    }
  }

  h1 {
    color: var(--gray-50) 0;
    font-size: var(--font-base);
    font-weight: var(--weight-extrabold);

    margin-top: var(--spacing-6);
  }
}
</style>
