---
const { buttonNameDefault, dropdownList, id, localStorageKey } = Astro.props;

interface Props {
  buttonNameDefault: string;
  dropdownList: { name: string; value: string }[];
  id: string;
  localStorageKey: Alu.ValidStoreKeys;
}
---

<div class="dropdown">
  <button data-local-storage-key={localStorageKey} id={id} class="dropdown-toggle" type="button" data-toggle="dropdown">
    {buttonNameDefault}
  </button>
  <ul class="dropdown-menu" id={id + "-menu"}>
    {
      dropdownList.map((item: any) => {
        return (
          <li class="dropdown-item" data-setting={item.value}>
            {item.name}
          </li>
        );
      })
    }
  </ul>
</div>
<style is:global>
  .dropdown {
    box-shadow: 4px 6px 15px 0px var(--background-color);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    position: relative;
  }
  .dropdown-toggle {
    background-color: var(--accent-color);
    border: none;
    color: var(--text-color);
    padding: 12px 16px;
    font-size: 16px;
    cursor: pointer;
    font-family: "Varela Round", sans-serif;
    width: 100%;
    border-radius: 10px;
    min-width: 140px;
    height: 50px;
  }
  .dropdown-menu {
    margin: 0;
    list-style: none;
    padding: 0;
    text-align: center;
    max-height: 0px; /* Set max-height to 0 instead of height */
    overflow: hidden;
    transition: max-height 350ms ease-in-out; /* Use max-height in the transition property */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: var(--dropdown-background-color);
    position: absolute;
    width: 100%;
    z-index: 5;
  }
  .dropdown-item {
    border-bottom: 1px solid var(--text-color-accent);
    padding: 10px;
    color: var(--text-color);
    cursor: pointer;
  }
  .dropdown-item:nth-last-child(1) {
    border-bottom: none;
  }
</style>
