<script setup>
import { useRoute, RouterLink } from "vue-router";
import {
  LayoutDashboard,
  Users,
  Activity,
  GraduationCap,
  History,
  UserCog,
} from "lucide-vue-next";
import logoUrl from "../assets/SB Sports.jpg";

const route = useRoute();

const navItems = [
  {
    to: "/",
    name: "dashboard",
    icon: LayoutDashboard,
    label: "Tableau de bord",
  },
  {
    to: "/students",
    name: "students",
    icon: Users,
    label: "Annuaire Étudiants",
  },
  {
    to: "/activity",
    name: "activity",
    icon: Activity,
    label: "Suivi Personnel",
  },
  {
    to: "/results",
    name: "results",
    icon: GraduationCap,
    label: "Résultats Académiques",
  },
  {
    to: "/history",
    name: "history",
    icon: History,
    label: "Historique Global",
  },
  {
    to: "/users",
    name: "users",
    icon: UserCog,
    label: "Utilisateurs",
  },
];

const isActive = (name) => route.name === name;
</script>

<template>
  <nav
    class="lg:w-72 w-full gradient-sidebar text-white flex flex-col p-6 shadow-xl"
  >
    <!-- Logo -->
    <div class="mb-10 px-2 flex items-center gap-4 lg:block">
      <img :src="logoUrl" alt="SB Sport" class="w-24 h-24 lg:w-full lg:h-auto object-contain rounded-2xl shrink-0" />
      <div class="lg:hidden">
        <p class="font-black text-lg leading-tight">P.E. Prof.</p>
        <p class="font-bold text-base text-blue-100">Sanae Benkhlifa</p>
      </div>
    </div>

    <!-- Nav links -->
    <div class="flex flex-col gap-2 flex-grow">
      <RouterLink
        v-for="item in navItems"
        :key="item.name"
        :to="item.to"
        :class="[
          'flex items-center gap-3 p-3 rounded-xl transition-all',
          isActive(item.name)
            ? 'bg-white/20 font-semibold'
            : 'hover:bg-white/10',
        ]"
      >
        <component :is="item.icon" class="w-5 h-5" />
        {{ item.label }}
      </RouterLink>
    </div>

    <!-- Footer -->
    <div
      class="mt-auto pt-6 border-t border-white/10 text-[10px] text-blue-200 text-center uppercase tracking-tighter"
    >
      &copy; 2024 Sanae Benkhlifa Sports
    </div>
  </nav>
</template>
