---
import type { HTMLAttributes } from "astro/types"
import { buttonCva2, buttonVariant, 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"

interface Props {
  title?: string
  href: string
  variant?: ButtonVariant
  size?: ButtonSize
  icon?: string
  iconRight?: string
  iconClass?: string
  newTab?: boolean
  class?: string
  id?: string
  clickAnimation?: boolean
  restProps?: HTMLAttributes<"a">
}
const p = Astro.props
const hasChildren = Astro.slots.has("default")
const classes = buttonCva2(
  p.variant ?? buttonVariant.link,
  p.size,
  p.clickAnimation ?? classesButtonClickAnimation,
  p.class,
)
---

<a href={p.href} class={classes} target={p.newTab ? "_blank" : undefined} id={p.id} title={p.title} {...p.restProps}>
  {
    p.icon && (
      <Icon path={p.icon} class={buttonIconCva(p.variant ?? "link", (p.title || hasChildren) && "mr-2", p.iconClass)} />
    )
  }
  <slot />
  {
    p.iconRight && (
      <Icon
        path={p.iconRight}
        class={buttonIconCva(p.variant ?? "link", (p.title || hasChildren) && "ml-2", p.iconClass)}
      />
    )
  }
</a>