export const Dropdown = ({
  disabled = false,
  toggleClass = '',
}: {
  toggleClass?: string,
  disabled?: boolean,
}) => {
  return vine`
    <details class="dropdown">
      <summary role="button" :class="toggleClass">
        <slot name="button" />
      </summary>
      <ul>
        <slot />
      </ul>
    </details>
  `
}

export const DropdownItem = (props: {
  icon?: string,
  disabled?: boolean,
  href?: string,
  class?: any,
  divider?: boolean,
}) => {
  return vine`
    <li v-if="divider" class="divider" />
    <template v-else>
      <li :role="$attrs.onClick ? 'button': undefined" :class="class">
        <a v-if="href" :href="href" v-bind="$attrs">
          <slot />
          <Icon v-if="icon" :icon="icon"/>
        </a>
        <template v-else>
          <slot />
          <Icon v-if="icon" :icon="icon"/>
        </template>
      </li>
    </template>
  `
}