---
export interface Props {
  type?: "primary" | "secondary" | "ghost" | "danger";
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  icon?: boolean;
  href?: string;
  htmlType?: "button" | "submit" | "reset";
}
const {
  type = "primary",
  size = "md",
  disabled = false,
  icon = false,
  href,
  htmlType = "button",
  ...rest
} = Astro.props;

const classes = [
  "button",
  `button__${type}`,
  `button--${size}`,
  icon ? "button--icon" : "",
  disabled ? "button--disabled" : "",
]
  .filter(Boolean)
  .join(" ");

const Tag = href ? "a" : "button";
---

<Tag
  class={classes}
  href={href}
  type={href ? undefined : htmlType}
  aria-disabled={disabled ? "true" : undefined}
  {...rest}
>
  <slot name="icon-left" />
  <slot />
  <slot name="icon-right" />
</Tag>

<style lang="scss">
  @use "./_button.scss";
</style>