---
import { Dropdown as DropdownContainer, DropdownItems } from "astro-navbar";
const { title, lastItem, children } = Astro.props;
---

<li class="relative">
  <DropdownContainer class="group">
    <button
      class="flex items-center gap-1 w-full lg:w-auto lg:px-3 py-2 text-gray-600 hover:text-gray-900">
      <span>{title}</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="3"
        stroke="currentColor"
        class="w-3 h-3 mt-0.5 group-open:rotate-180">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
      </svg>
    </button>
    <DropdownItems>
      <div
        class:list={[
          "lg:absolute w-full lg:w-48 z-10",
          lastItem
            ? "lg:right-0 origin-top-right"
            : "lg:left-0 origin-top-left",
        ]}>
        <div
          class="px-3 lg:py-2 lg:bg-white lg:rounded-md lg:shadow-sm lg:border flex flex-col">
          {
            children.map((item) => (
              <a
                href={item.path}
                class="py-1 text-gray-600 hover:text-gray-900">
                {item.title}
              </a>
            ))
          }
        </div>
      </div>
    </DropdownItems>
  </DropdownContainer>
</li>