"use client";

import type { ButtonHTMLAttributes, ReactNode } from "react";

type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: "primary" | "secondary" | "ghost" | "danger";
  loading?: boolean;
  leftIcon?: ReactNode;
};

function spinner() {
  return (
    <span
      aria-hidden="true"
      className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-white/20 border-t-white"
    />
  );
}

export default function Button({
  variant = "secondary",
  loading,
  leftIcon,
  className,
  disabled,
  children,
  ...props
}: Props) {
  const base =
    "inline-flex min-h-9 items-center justify-center gap-2 rounded-lg px-3 py-2 text-[13px] font-semibold transition-all disabled:cursor-not-allowed disabled:opacity-50";
  const variants: Record<string, string> = {
    primary: "bg-slate-950 text-white shadow-sm hover:bg-slate-800 dark:bg-emerald-400 dark:text-slate-950 dark:hover:bg-emerald-300",
    secondary: "border border-slate-200 bg-white text-slate-700 shadow-sm hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800",
    ghost: "text-slate-600 hover:bg-slate-100 hover:text-slate-950 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white",
    danger: "bg-rose-600 text-white hover:bg-rose-700",
  };

  return (
    <button
      className={[base, variants[variant], className].filter(Boolean).join(" ")}
      disabled={disabled || loading}
      type="button"
      {...props}
    >
      {loading ? spinner() : leftIcon}
      {children}
    </button>
  );
}