Button.astro

---
import type { HTMLAttributes } from "astro/types"
import { buttonCva2, type ButtonSize, type ButtonVariant } from "~ui/button/buttonCva"
import { buttonIconCva } from "~ui/button/buttonIconCva"
import { classesButtonClickAnimation } from "~ui/button/classesButtonClickAnimation"
import Icon from "~ui/icon/Icon.astro"
import { classMerge } from "~ui/utils/classMerge"

interface Props {
  id?: string
  textId?: string
  contentId?: string
  contentClass?: string
  title?: string
  text?: string
  variant: ButtonVariant
  size?: ButtonSize
  icon?: string
  iconRight?: string
  iconClass?: string
  class?: string
  onclick?: any
  restProps?: HTMLAttributes<"button">
}
const p = Astro.props

const classes = buttonCva2(p.variant, p.size, classesButtonClickAnimation, p.class)
const hasChildren = Astro.slots.has("default")
const hasContent = hasChildren || p.text
---

<button id={p.id} title={p.title} class={classes} {...p.restProps}>
  {p.icon && <Icon path={p.icon} class={classMerge(hasContent && "mr-2", buttonIconCva(p.variant, p.iconClass))} />}
  {
    p.text && (
      <span id={p.contentId} class={p.contentClass}>
        {p.text}
      </span>
    )
  }
  {
    hasContent && (
      <span id={p.contentId} class={p.contentClass}>
        <slot />
      </span>
    )
  }
  {p.iconRight && <Icon path={p.iconRight} class={buttonIconCva(p.variant, hasContent && "ml-2", p.iconClass)} />}
</button>