Button

import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
import { Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";

type Variant = "primary" | "soft" | "outline" | "ghost" | "danger" | "ink";
type Size = "sm" | "md" | "lg";

type Common = {
  variant?: Variant;
  size?: Size;
  loading?: boolean;
  iconLeft?: ReactNode;
  iconRight?: ReactNode;
  children?: ReactNode;
  className?: string;
};

export type ButtonProps = Common &
  (({ href?: undefined } & ButtonHTMLAttributes<HTMLButtonElement>) | ({ href: string } & AnchorHTMLAttributes<HTMLAnchorElement>));

const VARIANTS: Record<Variant, string> = {
  primary: "bg-da-primary text-da-primary-fg shadow-da-sm hover:shadow-da-md",
  soft: "bg-da-primary/12 text-da-fg hover:bg-da-primary/20",
  outline: "border-2 border-da-border-strong bg-da-surface text-da-fg hover:border-da-primary",
  ghost: "text-da-fg hover:bg-da-surface-2",
  danger: "bg-da-danger text-da-danger-fg shadow-da-sm hover:shadow-da-md",
  ink: "bg-da-fg text-da-bg hover:shadow-da-md",
};
const SIZES: Record<Size, string> = {
  sm: "h-9 px-4 text-sm gap-1.5 [&_svg]:size-4",
  md: "h-11 px-5 text-[15px] gap-2 [&_svg]:size-4",
  lg: "h-14 px-7 text-base gap-2 [&_svg]:size-5",
};

/** Friendly pill button: 6 variants (primary, soft lavender, outline, ghost, danger, ink), 3 sizes, icons, loading state, link mode; tiny bounce on hover. */
export function Button({ variant = "primary", size = "md", loading = false, iconLeft, iconRight, children = "Add task", className, ...rest }: ButtonProps) {
  const cls = cn(
    "da-focus inline-flex items-center justify-center rounded-da-pill font-semibold whitespace-nowrap transition-[translate,box-shadow,background-color,border-color] duration-(--da-duration) ease-da-emphasized hover:-translate-y-0.5 active:translate-y-0 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
    VARIANTS[variant],
    SIZES[size],
    className,
  );
  const inner = (
    <>
      {loading ? <Loader2 aria-hidden className="animate-spin motion-reduce:animate-none" /> : iconLeft}
      {children}
      {!loading && iconRight}
    </>
  );
  if ("href" in rest && rest.href !== undefined) {
    return (
      <a {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)} aria-disabled={loading || undefined} className={cls}>
        {inner}
      </a>
    );
  }
  const b = rest as ButtonHTMLAttributes<HTMLButtonElement>;
  return (
    <button type="button" {...b} disabled={b.disabled || loading} aria-busy={loading || undefined} className={cls}>
      {inner}
    </button>
  );
}

export default Button;