<script lang="ts">
  import { page } from '$app/stores';
  import {
    AlertTriangle,
    BarChart3,
    Calendar,
    CheckCircle,
    Database,
    DollarSign,
    Folder,
    Gauge,
    Grid3X3,
    LayoutDashboard,
    Settings,
    TrendingUp,
    Users
  } from 'lucide-svelte';

  const iconMap = {
    AlertTriangle,
    BarChart3,
    Calendar,
    CheckCircle,
    Database,
    DollarSign,
    Folder,
    Gauge,
    Grid3X3,
    LayoutDashboard,
    Settings,
    TrendingUp,
    Users
  } as const;

  export let icon: string;
  export let label: string;
  export let href: string;
  export let expanded = true;

  $: active = $page.url.pathname === href || $page.url.pathname.startsWith(`${href}/`);
  $: IconComponent = iconMap[icon as keyof typeof iconMap] ?? LayoutDashboard;
</script>

<a
  class="btn btn-ghost justify-start w-full h-10 rounded-lg"
  class:btn-active={active}
  class:justify-center={!expanded}
  href={href}
  title={!expanded ? label : undefined}
  aria-label={label}
  data-testid="sidebar-item"
>
  <svelte:component this={IconComponent} size={18} />
  {#if expanded}
    <span class="truncate">{label}</span>
  {/if}
</a>
