import type { LucideIcon } from "lucide-react";
import styles from "./Button.module.css";

export type Variant = "primaire" | "secondaire" | "success" | "danger" | "warning" | "ghost" | "outline";
export type Size = "sm" | "md" | "lg";

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  size?: Size;
  loading?: boolean;
  icon?: LucideIcon;
  iconRight?: LucideIcon;
  fullWidth?: boolean;
}

export default function Button({
  variant = "primaire",
  size = "md",
  loading = false,
  icon: Icon,
  iconRight: IconRight,
  fullWidth = false,
  disabled,
  children,
  className = "",
  ...props
}: ButtonProps) {
  const isIconOnly = !children && (Icon || loading);

  return (
    <button
      className={[
        styles.btn,
        styles[variant],
        styles[size],
        isIconOnly ? styles.iconOnly : "",
        fullWidth ? styles.fullWidth : "",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
      disabled={disabled || loading}
      {...props}
    >
      {loading ? <span className={styles.spinner} /> : Icon && <Icon size={15} strokeWidth={2} />}
      {children}
      {!loading && IconRight && <IconRight size={15} strokeWidth={2} />}
    </button>
  );
}