Untitled

`---
import { Icon } from "astro-icon/components";
import { getSizeClass, combineClasses, isValidHref } from "../lib/utils";

interface Props {
  kind?: "primary" | "secondary" | "tertiary" | "ghost";
  size?: string;
  radius: "none" | "rounded" | "full";
  leadingIcon?: string;
  trailingIcon?: string;
  disabled?: boolean;
  renderAs: "a" | "button";
  link?: string;
  target?: "_blank" | "_parent" | "_self" | "_top" | string;
  action?: () => void;
  ariaLabel?: string;
  tabIndex?: number;
}

const {
  kind = "primary",
  size = "md",
  radius = "none",
  leadingIcon,
  trailingIcon,
  disabled = false,
  renderAs,
  link,
  target,
  action,
  ariaLabel = "button for ...",
  tabIndex = 0,
} = Astro.props;

let renderAsHtmlButton: boolean = renderAs === "button";
let buttonSize: string = getSizeClass(size);
let disabledClass = disabled ? "disabled" : "";
let classes: string = combineClasses([
  "button",
  `button-${kind}`,
  `size-${buttonSize}`,
  `radius-${radius}`,
  disabledClass,
]);

const buttonLink:string = (link && isValidHref(link)) ? link : "#";
---

{
  renderAsHtmlButton ? (
    <button class={classes} disabled={disabled} aria-label={ariaLabel} tabindex={tabIndex} data-action={action}>
      {leadingIcon &&
        <Icon class="icon" name=`tabler:${leadingIcon}` />
      }
        <span class="label"><slot> Button text </slot></span>
      {trailingIcon &&
        <Icon class="icon" name=`tabler:${trailingIcon}` />
      }
    </button>
  ) : (
    <a href={buttonLink} class={classes} {target} aria-label={ariaLabel} tabindex={tabIndex}>
      {leadingIcon &&
        <Icon class="icon" name=`tabler:${leadingIcon}` />
      }
        <span class="label"><slot> Button text </slot></span> 
      {trailingIcon &&
        <Icon class="icon" name=`tabler:${trailingIcon}` />
      }
    </a>
  )
}


<script>
  //@ts-nocheck
  document.querySelectorAll('button').forEach(button => {
    button.addEventListener('click', (event) => {
      console.log(button.dataset.action);

      // event.preventDefault(); // Prevent default link behavior
      // const callBackFunction = button.getAttribute('data-action');
      // if (callBackFunction && typeof window[callBackFunction] === 'function') {
      //   window[callBackFunction]();
      // }
    });
  });
</script>`