---
interface Props {
  id?: string;
  nombre: string;
  color?: string;
  opciones: Option[];
}

interface Option {
  titulo: string;
  link: string;
}

const { id, nombre, color, opciones } = Astro.props;
---

<div class="relative inline-block text-left" id={`menu-button-${id}`} >
  <div>
    <button
      type="button"
      class=`px-3 py-2 text-lg ${color} font-medium border-b-2 border-b-[#444643] hover:border-b-stone-700 hover:text-gray-300 flex flex-row items-center`
     
      aria-expanded="false"
      aria-haspopup="true"
    >
      {nombre}
      <svg
        class="-mr-1 size-5 text-gray-400"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
        data-slot="icon"
      >
        <path
          fill-rule="evenodd"
          d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
          clip-rule="evenodd"></path>
      </svg>
    </button>
  </div>

  <div
    id={`menu-${id}`}
    class="absolute right-0 z-10 transition ease-out duration-100 mt-2 w-56 origin-top-right rounded-md shadow-lg ring-1 ring-black/5 focus:outline-none scale-95 opacity-0 hidden bg-white"
    role="menu"
    aria-orientation="vertical"
    aria-labelledby="menu-button"
    tabindex="-1"
  >
    <div class="py-1" role="none">
      {
        opciones.map((opcion: Option, index: number) => (
          <a
            href={opcion.link}
            class="block w-full px-4 py-2 text-md text-start text-gray-700 font-semibold hover:bg-gray-100"
            role="menuitem"
            tabindex="-1"
            id={`menu-item-${id}-${index}`}
          >
            {opcion.titulo}
          </a>
        ))
      }
    </div>
  </div>
</div>
