import { badgeVariants, type BadgeVariants } from "./variants.ts";
import { cn } from "#lib/utils.ts";

// Same `href` pattern as Button (see its own comment): a badge that is
// semantically a link — e.g. a "what's new" pill that navigates — renders as
// a real <a> with identical classes/data attributes instead of a <span>
// requiring a hand-rolled wrapper anchor.
export type Input =
  | (Marko.Input<"span"> & BadgeVariants & { href?: never })
  | (Marko.Input<"a"> & BadgeVariants & { href: string });

<const/{ variant, class: className, content, ...rest }=input/>

<const/classes=cn(badgeVariants({ variant }), className)/>

<if=(input.href != null)>
  <a
    data-slot="badge"
    data-variant=(variant ?? "default")
    ...(rest as Marko.Input<"a">)
    class=classes
  >
    <${content}/>
  </a>
</if>
<else>
  <span
    data-slot="badge"
    data-variant=(variant ?? "default")
    ...(rest as Marko.Input<"span">)
    class=classes
  >
    <${content}/>
  </span>
</else>