---
import type { HTMLAttributes } from "astro/types";
import { tv } from "tailwind-variants";

type Props = Omit<HTMLAttributes<"button">, "role" | "type"> & {
  /**
   * When true, the component will render its child element with a simple wrapper instead of a button component
   */
  asChild?: boolean;
};

export const dropdownTrigger = tv({
  base: [
    "starwind-dropdown-trigger",
    "inline-flex items-center justify-center",
    "focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",
    "disabled:pointer-events-none",
  ],
});

const { class: className, asChild = false, ...rest } = Astro.props;

// Get the first child element if asChild is true
let hasChildren = false;
if (Astro.slots.has("default")) {
  hasChildren = true;
}
---

{
  asChild && hasChildren ? (
    <div
      class:list={["starwind-dropdown-trigger", className]}
      data-slot="dropdown-trigger"
      data-as-child
    >
      <slot />
    </div>
  ) : (
    <button
      class={dropdownTrigger({ class: className })}
      type="button"
      aria-haspopup="true"
      aria-expanded="false"
      data-state="closed"
      data-slot="dropdown-trigger"
      {...rest}
    >
      <slot />
    </button>
  )
}
