---
import Icon from "astro-iconify";
export interface Props {
  toggle: string;
}

const { toggle } = Astro.props;
---

<form id="settings-form" hidden>
  <h2>Settings</h2>
  <label for={toggle}>
    <Icon name="mdi:close" />
  </label>
  <div class="field">
    <input type="checkbox" id="settings-1" name="settings-1" checked />
    <label for="settings-1">Option 1</label>
  </div>
</form>

<style lang="scss">
  #settings-form {
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
    padding: 1em;
    width: 300px;
    position: absolute;
    top: 0.5em;
    right: 0.1em;
    box-shadow: 0 1px 3px 1px #eee;

    h2 {
      margin: 0.5em 0;
    }

    svg {
      width: 24px;
      height: 24px;
      position: absolute;
      top: 0.5em;
      right: 0.5em;
      cursor: pointer;
    }
  }
</style>

<script>
  /**
   * temporary JS solution, should be replaced with CSS
   */
  document
    .getElementById("settings-toggle")
    ?.addEventListener("change", (e) => {
      if (e.currentTarget?.["checked"])
        document.getElementById("settings-form")?.removeAttribute("hidden");
      else document.getElementById("settings-form")?.setAttribute("hidden", "");
    });
</script>