import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { Slot } from "radix-ui";

import { cn } from "@/lib/utils";

const buttonVariants = cva(
  "inline-flex cursor-pointer shrink-0 items-center justify-center gap-2 rounded-xl text-[13px] font-semibold whitespace-nowrap transition-all outline-none focus-visible:ring-2 focus-visible:ring-accent/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 font-['Lexend_Deca']",
  {
    variants: {
      variant: {
        default: "bg-accent text-white hover:opacity-90 shadow-sm",
        destructive: "bg-red text-white hover:opacity-90 shadow-sm",
        outline:
          "border border-border bg-white text-gray-700 hover:border-accent hover:text-accent shadow-sm",
        /** Outline with accent text/border (secondary actions that lead into accent flows) */
        outlineAccent:
          "border border-accent/20 bg-white text-accent shadow-sm hover:bg-accent/5",
        /** Outline with emerald accent */
        outlineSuccess:
          "border border-emerald-500/20 bg-white text-emerald-600 shadow-sm hover:bg-emerald-50",
        secondary:
          "bg-bg text-text hover:bg-border",
        ghost:
          "text-gray-700 hover:bg-bg hover:text-accent shadow-none",
        /** Muted ghost for cancel / secondary actions in dialogs */
        ghostMuted:
          "text-muted-foreground hover:bg-muted/60 hover:text-foreground shadow-none",
        /** Ghost with accent text (inline “clear search”, etc.) */
        ghostAccent:
          "gap-1.5 font-semibold text-accent shadow-none hover:bg-accent/10 hover:text-accent",
        link: "text-accent underline-offset-4 hover:underline shadow-none",
        premium:
          "bg-accent text-white font-bold px-[14px] py-[7px] text-[12px] rounded-lg hover:opacity-88 transition-opacity",
        glass:
          "bg-white/10 backdrop-blur-md border border-white/10 text-white hover:bg-white/20",
        /** Small icon on glass / light cards — pair with `size="iconDeal"` */
        floating:
          "border border-white/80 bg-white/80 text-gray-700 shadow-sm backdrop-blur hover:bg-white hover:text-accent",
        /** Same shell as `floating` but delete / danger hover */
        floatingDanger:
          "border border-white/80 bg-white/80 text-gray-700 shadow-sm backdrop-blur hover:bg-white hover:text-red-500",
        /** Large dashed “add” control (e.g. new pipeline column); `group` for nested hover accents */
        dashed:
          "group mt-2 flex h-[120px] w-full flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-border bg-transparent p-0 text-gray-700 shadow-none transition-all [transform:scale(0.98)] hover:scale-100 hover:bg-accent/5 hover:text-accent",
        /** Success / positive primary (convert, confirm green flows) */
        success:
          "bg-emerald-600 text-white hover:bg-emerald-700 shadow-sm",
        /** Full-width primary in a row (e.g. “Add stage”) */
        rowPrimary:
          "flex-1 min-h-10 h-10 shrink rounded-2xl border-0 bg-accent px-4 text-[14px] font-semibold text-white shadow-sm hover:opacity-90",
        /** Square ghost dismiss (rounded-2xl) */
        ghostSoft:
          "size-10 shrink-0 rounded-2xl border-0 bg-transparent p-0 text-muted-foreground shadow-none hover:bg-muted hover:text-foreground",
        /** Tight square ghost icon (inline rows, ~28px) */
        ghostIconTight:
          "size-7 min-h-7 min-w-7 rounded-lg border-0 bg-transparent p-0 text-muted-foreground shadow-none hover:bg-accent/10 hover:text-accent [&_svg]:size-3.5",
        ghostIconTightMuted:
          "size-7 min-h-7 min-w-7 rounded-lg border-0 bg-transparent p-0 text-muted-foreground shadow-none hover:bg-accent/10 hover:text-accent [&_svg]:size-3.5",
        ghostIconTightDanger:
          "size-7 min-h-7 min-w-7 rounded-lg border-0 bg-transparent p-0 text-red-500 shadow-none hover:bg-red-50 hover:text-red-600 [&_svg]:size-3.5",
        /** `ghostIconTightMuted` + reveal on `group-hover/item` */
        ghostIconTightMutedReveal:
          "size-7 min-h-7 min-w-7 rounded-lg border-0 bg-transparent p-0 text-muted-foreground opacity-0 shadow-none transition-opacity group-hover/item:opacity-70 hover:bg-accent/10 hover:text-accent [&_svg]:size-3.5",
        /** `ghostIconTightDanger` + reveal on `group-hover/item` */
        ghostIconTightDangerReveal:
          "size-7 min-h-7 min-w-7 rounded-lg border-0 bg-transparent p-0 text-red-500 opacity-0 shadow-none transition-opacity group-hover/item:opacity-70 hover:bg-red-50 hover:text-red-600 [&_svg]:size-3.5",
        /** Toolbar danger icon, hidden until parent `group-hover` */
        toolbarDangerReveal:
          "h-9 w-9 shrink-0 rounded-xl border-0 bg-transparent p-0 text-muted-foreground opacity-0 shadow-none transition-opacity hover:bg-destructive/10 hover:text-destructive group-hover:opacity-100",
        /** Prominent accent CTAs (replaces raw `#6C63FF` fills) */
        accentStageNext:
          "h-10 rounded-xl bg-accent px-6 font-bold text-white shadow-lg shadow-accent/25 animate-in zoom-in-95 duration-300 hover:opacity-90",
        accentAlertCta:
          "rounded-xl bg-accent px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:opacity-90 disabled:opacity-60",
        accentFormPrimary:
          "h-11 rounded-xl gap-2 bg-accent px-8 font-bold text-white shadow-lg shadow-accent/25 transition-all active:scale-95 hover:opacity-90",
        accentSoftOutline:
          "h-10 gap-2 rounded-xl border-2 border-accent/30 bg-white font-semibold text-[13px] text-accent shadow-sm hover:bg-accent/10",
        accentReminderBar:
          "h-10 rounded-xl bg-accent px-5 font-semibold text-white hover:opacity-90",
        accentNoteSave:
          "h-7 rounded-lg border-0 bg-accent px-3 text-xs font-semibold text-white hover:opacity-90",
        ghostNoteCancel:
          "h-7 rounded-lg border-0 bg-transparent px-3 text-xs font-medium text-gray-600 shadow-none hover:bg-muted",
        /** Full-width deal card row actions */
        dealCardAssignTask:
          "h-8 w-full gap-1.5 rounded-[8px] border-0 bg-accent/5 text-xs font-semibold text-accent shadow-none hover:bg-accent/10 hover:text-accent",
        dealCardCustomerView:
          "h-8 w-full gap-1.5 rounded-[8px] border-0 bg-gray-100 text-xs font-semibold text-gray-600 shadow-none hover:bg-gray-200 hover:text-gray-700",
        dealCardCustomerConvert:
          "h-8 w-full gap-1.5 rounded-[8px] border-0 bg-emerald-50 text-xs font-semibold text-emerald-600 shadow-none hover:bg-emerald-100 hover:text-emerald-700",
        /** Add-company / glass hero */
        ghostBackCircle:
          "size-10 rounded-full border-0 bg-transparent text-gray-700 shadow-none hover:bg-white/10",
        outlineGlassBack:
          "h-12 rounded-xl border border-white bg-white/60 px-8 font-bold text-[13px] text-gray-900 shadow-sm backdrop-blur-[15px] hover:bg-white/40",
        accentHeroSubmit:
          "h-12 rounded-xl bg-accent px-10 font-bold text-[13px] text-white shadow-premium transition-all hover:scale-[1.02] active:scale-[0.98]",
        /** Role matrix compact actions */
        ghostSuccessRow:
          "h-8 rounded-lg border-0 bg-transparent px-3 text-[11px] font-bold text-emerald-600 shadow-none hover:bg-emerald-50 hover:text-emerald-700 dark:hover:bg-emerald-950/30",
        ghostInfoRow:
          "h-8 rounded-lg border-0 bg-transparent px-3 text-[11px] font-bold text-blue-600 shadow-none hover:bg-blue-50 hover:text-blue-700 dark:hover:bg-blue-950/30",
        ghostIndigoRow:
          "h-8 rounded-lg border-0 bg-transparent px-3 text-[11px] font-bold text-indigo-600 shadow-none hover:bg-indigo-50 hover:text-indigo-700 dark:hover:bg-indigo-950/30",
        destructiveRowEmphasis:
          "h-8 rounded-lg border-0 bg-destructive px-4 text-[11px] font-bold text-white shadow-md shadow-red-500/10 transition-transform hover:scale-[1.02]",
        ghostMutedRowDismiss:
          "h-8 rounded-lg border-0 bg-transparent px-3 text-[11px] font-bold text-gray-400 shadow-none hover:bg-transparent hover:text-gray-900 dark:hover:text-gray-100",
        ghostOutlineRow:
          "h-8 rounded-xl border border-border bg-transparent px-3 text-[12px] font-semibold text-gray-700 shadow-none hover:bg-muted",
        accentRowSm:
          "h-8 rounded-xl border-0 bg-accent px-4 text-[12px] font-semibold text-white shadow-none hover:opacity-90",
        /** Note composer “add image” */
        outlineNoteAttach:
          "h-8 gap-1.5 rounded-lg border border-gray-300 bg-white px-3 text-[11px] font-semibold text-gray-700 shadow-sm hover:bg-gray-50",
        /** Activity logs toolbar — primary CTA (e.g. Generate Report) */
        activityLogPrimary:
          "h-10 rounded-xl border-0 bg-blue-600 px-4 font-medium text-white shadow-sm hover:bg-blue-700",
        /** Activity logs — back control */
        outlineBackPanel:
          "h-10 w-10 rounded-xl border border-slate-200 bg-white p-0 text-gray-800 shadow-sm hover:bg-muted",
        /** Activity logs — card CTA */
        outlineViewDealCard:
          "h-10 w-full rounded-xl border border-slate-200 bg-white font-semibold text-[13px] text-slate-600 shadow-sm transition-all hover:bg-[#1d1d39] hover:text-white",
        /** Pagination — current page (non-interactive) */
        paginationPageCurrent:
          "h-8 w-8 min-w-8 cursor-default rounded-md border-0 bg-accent p-0 text-[12px] font-bold text-white shadow-sm pointer-events-none",
        /** Payment structure — milestone calendar trigger states */
        paymentCalendarIconDue:
          "h-9 w-9 shrink-0 rounded-xl border-0 bg-transparent p-0 text-accent shadow-none hover:bg-accent/10",
        paymentCalendarIconEmpty:
          "h-9 w-9 shrink-0 rounded-xl border-0 bg-transparent p-0 text-slate-300 shadow-none hover:bg-muted hover:text-slate-600",
        /** Payment structure — full-width muted row action */
        ghostFullRowMuted:
          "h-8 w-full border-0 bg-transparent text-xs font-normal text-muted-foreground shadow-none hover:bg-muted",
        /** Payment structure — custom row submit */
        paymentCustomRowSubmit:
          "h-9 w-full rounded-lg border-0 bg-accent text-xs font-semibold text-white shadow-none hover:opacity-90 disabled:opacity-50",
        /** Payment structure — date picker row */
        outlineMilestoneDateBtn:
          "h-9 w-full justify-start gap-1 rounded-xl border border-slate-200 bg-white px-2 text-left text-xs font-normal text-foreground shadow-sm hover:bg-muted",
        /** Payment structure — inline date chip */
        ghostCustomPaymentDate:
          "h-8 gap-1 border-0 bg-transparent px-2 text-xs font-normal text-slate-700 shadow-none hover:bg-muted",
        /** Payment structure — compact row trash */
        ghostRowRemoveSlate:
          "h-8 w-8 border-0 bg-transparent p-0 text-slate-400 shadow-none hover:text-red-600",
        /** Full-width payment CTA */
        paymentBlockAccent:
          "h-11 w-full rounded-xl border-0 bg-accent font-semibold text-white transition-all hover:opacity-90 disabled:opacity-50",
        /** Tasks “clear filters” chip */
        outlineFilterReset:
          "h-10 gap-2 rounded-xl border border-border/80 bg-white px-4 font-bold text-[13px] text-gray-700 shadow-sm transition-all hover:border-accent",
        /** Deal tracker — compact clear */
        outlineTimelineClear:
          "h-8 shrink-0 gap-1.5 rounded-lg border border-border/80 bg-white/90 px-2.5 text-[12px] font-semibold text-foreground shadow-sm hover:bg-white disabled:opacity-50",
        /** Deal list inline icon row */
        ghostRowAccentIcon:
          "h-8 w-8 rounded-lg border-0 bg-transparent p-0 text-gray-600 shadow-none hover:bg-accent/10 hover:text-accent",
        ghostRowInfoIcon:
          "h-8 w-8 rounded-lg border-0 bg-transparent p-0 text-gray-600 shadow-none hover:bg-blue-50 hover:text-blue-600",
        ghostRowDangerIcon:
          "h-8 w-8 rounded-lg border-0 bg-transparent p-0 text-gray-600 shadow-none hover:bg-red-50 hover:text-red-600",
        /** Combobox chip remove */
        ghostChipRemove:
          "-ml-1 size-7 rounded-sm border-0 bg-transparent p-0 opacity-50 shadow-none hover:opacity-100",
        /** Input suffix (search clear, password reveal) */
        inputTrailingIcon:
          "absolute right-0 top-0 h-full rounded-none border-0 bg-transparent px-3 text-muted-foreground shadow-none hover:text-foreground",
        /** Compact square back control in headers */
        ghostIconBack:
          "h-8 w-8 shrink-0 rounded-xl border-0 bg-transparent p-0 text-muted-foreground shadow-none hover:bg-muted hover:text-foreground [&_svg]:size-4",
        /** Add-company row remove */
        ghostIconRowDangerReveal:
          "size-8 shrink-0 rounded-md border-0 bg-transparent p-0 text-gray-400 opacity-0 shadow-none transition-opacity hover:text-destructive group-hover:opacity-100",
        /** Notification deal insider banners */
        destructiveBanner:
          "h-11 rounded-xl border-0 bg-destructive px-6 font-bold text-white shadow-lg shadow-red-200/40 transition-all animate-in slide-in-from-right-4 active:scale-95",
        outlineBannerMuted:
          "h-11 rounded-xl border border-gray-200 bg-white px-6 font-bold text-gray-600 shadow-sm transition-all hover:bg-gray-50",
        /** Profile / small accent save */
        accentProfileSave:
          "h-8 rounded-lg border-0 bg-accent px-3 text-sm font-semibold text-white shadow-none hover:opacity-90",
        /** Profile — muted outline icon */
        outlineMutedShrunk:
          "h-8 shrink-0 rounded-xl border border-gray-300 bg-white px-3 text-sm font-medium text-gray-800 shadow-sm hover:bg-muted",
        /** Contact modal — soft accent outline */
        outlineAccentSoft:
          "h-8 gap-1.5 rounded-xl border border-accent/40 bg-white text-xs font-semibold text-accent shadow-sm hover:bg-accent/5",
        /** Company list delete icon */
        ghostIconDeleteSoft:
          "size-7 rounded-md border-0 bg-transparent p-0 text-gray-600 shadow-none hover:bg-red/10 hover:text-red",
        /** Pipeline sub-stages header CTA */
        accentPipelineHeader:
          "h-10 rounded-xl border-0 bg-accent px-4 text-[13px] font-bold text-white shadow-sm hover:opacity-90",
        /** Pipeline sub-stages row */
        outlineRowTight:
          "ml-auto h-7 rounded-lg border border-border bg-white px-2 text-xs font-medium text-gray-700 shadow-sm hover:bg-muted",
        /** Stage names — compact new */
        accentStageNameNew:
          "h-9 shrink-0 gap-1.5 rounded-xl border-0 bg-accent px-3 text-[12px] font-extrabold text-white shadow-premium hover:opacity-90",
        /** Floating bulk bar — delete */
        destructiveBulkBar:
          "h-9 gap-2 rounded-xl border-0 bg-destructive px-4 text-[12px] font-bold text-white shadow-lg shadow-red-100/80 hover:opacity-90",
        /** Floating bulk bar — clear selection */
        ghostBulkClear:
          "h-9 gap-2 rounded-xl border-0 bg-transparent px-4 text-[12px] font-bold text-gray-500 shadow-none hover:bg-muted hover:text-gray-900",
        /** Sub-stages list header — add */
        accentSubStageToolbar:
          "h-9 shrink-0 rounded-xl border-0 bg-accent px-3 text-[12px] font-extrabold text-white shadow-premium hover:opacity-90",
        /** Permissions / small modal primary */
        accentModalSm:
          "h-9 rounded-xl border-0 bg-accent px-4 font-semibold text-[13px] text-white shadow-sm transition-all hover:opacity-90 animate-in zoom-in-95 duration-200",
        /** Toolbar “add” row (user permissions, etc.) */
        accentToolbarAdd:
          "h-9 gap-1.5 rounded-xl border-0 bg-accent px-4 font-semibold text-[13px] text-white shadow-sm hover:opacity-90",
        destructiveModalSm:
          "h-9 gap-1.5 rounded-xl border-0 bg-destructive px-4 font-semibold text-[13px] text-white shadow-sm transition-all animate-in zoom-in-95 duration-200 hover:opacity-90",
        /** Add-permission dialog primary */
        accentGrantBatch:
          "h-10 min-w-[140px] gap-2 rounded-xl border-0 bg-accent px-6 font-semibold text-white shadow-sm hover:opacity-90",
        /** Tasks page “New task” */
        tasksHeaderCta:
          "h-10 min-h-10 w-full flex-1 gap-2 rounded-xl border-0 bg-accent px-5 font-black text-[13px] text-white shadow-premium hover:opacity-90 md:w-auto md:flex-none md:shrink-0",
        /** Contacts toolbar — clear selection (readable on glass / tinted tables) */
        outlineToolbarClear:
          "h-8 rounded-xl border border-slate-200 bg-white px-3 text-[12px] font-semibold text-slate-800 shadow-sm transition-colors hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 hover:shadow active:bg-slate-100",
        /** Contacts — move stage */
        outlineAccentInline:
          "h-8 gap-1.5 rounded-xl border border-accent/40 bg-white text-[12px] font-semibold text-accent shadow-sm hover:bg-accent/10",
        /** Contacts — bulk delete */
        destructiveCompact:
          "h-8 gap-1.5 rounded-xl border-0 bg-destructive px-3 text-[12px] font-semibold text-white shadow-sm hover:opacity-90",
        /** Notifications filter chips */
        notificationsFilterOn:
          "h-8 rounded-lg border-0 bg-white px-4 text-[12px] font-bold text-accent shadow-sm",
        notificationsFilterOff:
          "h-8 rounded-lg border-0 bg-transparent px-4 text-[12px] font-bold text-gray-600 shadow-none hover:text-foreground",
        /** Dialog primary without min-width guard */
        accentDialogPrimary:
          "h-10 rounded-xl border-0 bg-accent px-6 font-semibold text-white shadow-sm hover:opacity-90",
        /** Tasks table row icon cells */
        ghostTableIcon:
          "size-8 rounded-md border-0 bg-transparent p-0 text-muted-foreground shadow-none hover:bg-muted hover:text-foreground",
        ghostTableDanger:
          "size-8 rounded-md border-0 bg-transparent p-0 text-red-500 shadow-none hover:bg-red-50 hover:text-red-600",
        /** Modal / team dialogs */
        outlineModalAction:
          "h-10 rounded-xl border border-border bg-white px-6 font-semibold text-gray-800 shadow-sm hover:bg-muted/40",
        accentModalAction:
          "h-10 min-w-[130px] rounded-xl border-0 bg-accent px-6 font-semibold text-white shadow-sm hover:opacity-90",
        /** Pipeline stages page */
        accentPipelinePrimary:
          "h-10 gap-2 rounded-xl border-0 bg-accent px-5 font-black text-[13px] text-white shadow-premium transition-all active:scale-95",
        accentPipelineBlock:
          "h-12 w-full rounded-[18px] border-0 bg-accent text-[13px] font-black text-white shadow-premium hover:opacity-90",
        /** Notifications row compact outline */
        outlineToolbarMini:
          "h-7 gap-1.5 rounded-lg border border-slate-200 bg-white px-2.5 text-[11px] font-semibold text-slate-800 shadow-sm transition-colors hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 hover:shadow active:bg-slate-100",
        /** Toolbar icon buttons — set `tone` when `variant="toolbar"` */
        toolbar: "",
      },
      /** Used with variant `toolbar` for icon hover accents */
      tone: {
        default: "",
        neutral: "",
        info: "",
        violet: "",
        success: "",
        accent: "",
        danger: "",
      },
      size: {
        default: "h-10 px-4 py-2",
        xs: "h-7 px-2.5 text-[10px]",
        sm: "h-8 px-3 text-[11px]",
        md: "h-10 px-4 text-[13px]",
        lg: "h-12 px-6 text-[15px]",
        /** Primary CTA in page headers (taller than sm) */
        cta: "h-10 px-5 text-[13px]",
        /** Compact primary in tight rows */
        ctaCompact: "h-9 px-4 text-[12px]",
        icon: "size-10",
        "icon-sm": "size-8",
        "icon-xs": "size-7",
        /** Pagination prev/next */
        pagination: "h-8 gap-1 px-3 text-[12px] font-semibold",
        /** Numeric page buttons */
        page: "h-8 w-8 min-w-8 rounded-md p-0 text-[12px] font-bold",
        iconDeal: "h-6 w-6 min-h-6 min-w-6 gap-0 rounded-md p-0 [&_svg]:!size-3.5",
        iconToggle: "size-7 min-h-7 min-w-7 gap-0 rounded-lg p-0 [&_svg]:size-3.5",
        block: "h-11 w-full px-4",
        relaxed: "h-10 px-8",
        fullSm: "h-9 w-full rounded-lg px-3 text-[13px]",
        /** Deal detail / modal footers — tight label */
        footerDense: "h-8 px-3 text-xs font-semibold gap-2",
        /** Sheet / deal modal footer buttons (mobile-first label) */
        responsiveFooter:
          "min-h-10 flex-1 min-w-[8rem] uppercase tracking-widest sm:flex-initial sm:min-w-0 sm:normal-case sm:tracking-normal sm:text-[13px]",
        responsiveFooterWide:
          "min-h-10 flex-1 min-w-[10rem] uppercase tracking-widest sm:flex-initial sm:min-w-0 sm:normal-case sm:tracking-normal",
        /** Auth full-width submit */
        authSubmit: "h-11 w-full justify-center rounded-xl text-sm font-semibold",
        /** Dense outline (sessions / password tables) */
        outlineTable: "h-8 px-3 text-xs font-medium",
      },
    },
    compoundVariants: [
      {
        variant: "toolbar",
        tone: "default",
        class:
          "h-9 w-9 shrink-0 rounded-xl p-0 text-muted-foreground shadow-none hover:bg-muted hover:text-foreground",
      },
      {
        variant: "toolbar",
        tone: "neutral",
        class:
          "h-9 w-9 shrink-0 rounded-xl p-0 text-muted-foreground shadow-none hover:bg-muted hover:text-foreground",
      },
      {
        variant: "toolbar",
        tone: "info",
        class:
          "h-9 w-9 shrink-0 rounded-xl p-0 text-muted-foreground shadow-none hover:bg-blue-50 hover:text-blue-600",
      },
      {
        variant: "toolbar",
        tone: "violet",
        class:
          "h-9 w-9 shrink-0 rounded-xl p-0 text-muted-foreground shadow-none hover:bg-violet-50 hover:text-violet-600",
      },
      {
        variant: "toolbar",
        tone: "success",
        class:
          "h-9 w-9 shrink-0 rounded-xl p-0 text-muted-foreground shadow-none hover:bg-green-50 hover:text-green-700",
      },
      {
        variant: "toolbar",
        tone: "accent",
        class:
          "h-9 w-9 shrink-0 rounded-xl p-0 text-muted-foreground shadow-none hover:bg-accent/10 hover:text-accent",
      },
      {
        variant: "toolbar",
        tone: "danger",
        class:
          "h-9 w-9 shrink-0 rounded-xl p-0 text-muted-foreground shadow-none hover:bg-destructive/10 hover:text-destructive",
      },
    ],
    defaultVariants: {
      variant: "default",
      size: "default",
      tone: "default",
    },
  },
);

import { Loader2 } from "lucide-react";

export type ButtonProps = React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean;
    loading?: boolean;
  };

function Button({
  className,
  variant = "default",
  size = "default",
  tone,
  asChild = false,
  loading = false,
  disabled,
  children,
  ...props
}: ButtonProps) {
  const Comp = asChild ? Slot.Root : "button";
  const toneResolved = tone ?? "default";

  return (
    <Comp
      data-slot="button"
      data-variant={variant}
      data-size={size}
      disabled={loading || disabled}
      className={cn(
        buttonVariants({ variant, size, tone: toneResolved }),
        className,
      )}
      {...props}
    >
      {asChild ? (
        children
      ) : (
        <>
          {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
          {children}
        </>
      )}
    </Comp>
  );
}

export { Button, buttonVariants };