<script lang="ts">
  import type { NavItem } from '../types/nav';
  import * as Accordion from '$lib/components/ui/accordion'; // Assuming Shadcn Accordion is in $lib/components/ui/accordion
  import { Button } from '$lib/components/ui/button'; // Assuming Shadcn Button is in $lib/components/ui/button
  import { ChevronDown } from 'lucide-svelte'; // Assuming lucide-svelte is installed for icons

  export let navData: NavItem[];

  function renderNavItem(item: NavItem): any {
    if (item.children && item.children.length > 0) {
      return Accordion.Item;
    } else {
      return 'a'; // Render as a link
    }
  }
</script>

<nav class="w-64 bg-gray-800 text-white h-full">
  <div class="p-4">
    <h2 class="text-xl font-semibold mb-4">OurWorld</h2>
  </div>
  <Accordion.Root class="w-full">
    {#each navData as item}
      {#if item.children && item.children.length > 0}
        <Accordion.Item value={item.label}>
          <Accordion.Trigger class="flex justify-between items-center w-full text-left p-4 hover:bg-gray-700">
            {item.label}
            <ChevronDown class="h-4 w-4 transition-transform duration-200" />
          </Accordion.Trigger>
          <Accordion.Content>
            <ul class="pl-4">
              {#each item.children as child}
                <li>
                  <a href={child.link} class="block p-2 hover:bg-gray-700">
                    {child.label}
                  </a>
                </li>
              {/each}
            </ul>
          </Accordion.Content>
        </Accordion.Item>
      {:else}
        <a href={item.link} class="block p-4 hover:bg-gray-700">
          {item.label}
        </a>
      {/if}
    {/each}
  </Accordion.Root>
</nav>