import React, { ButtonHTMLAttributes } from "react";
import styles from "@/styles/modules/ui.module.css";

export type ActionButtonVariant =
  | "danger"
  | "dangerMuted"
  | "success"
  | "warning"
  | "primary"
  | "primaryOutline"
  | "ghost"
  | "pillDanger"
  | "pillSuccess"
  | "pillPrimary"
  | "pillPrimaryOutline";

const VARIANT_CLASS: Record<ActionButtonVariant, string> = {
  danger: styles.danger,
  dangerMuted: styles.dangerMuted,
  success: styles.success,
  warning: styles.warning,
  primary: styles.primary,
  primaryOutline: styles.primaryOutline,
  ghost: styles.ghost,
  pillDanger: styles.pillDanger,
  pillSuccess: styles.pillSuccess,
  pillPrimary: styles.pillPrimary,
  pillPrimaryOutline: styles.pillPrimaryOutline,
};

export interface ActionButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ActionButtonVariant;
}

const ActionButton: React.FC<ActionButtonProps> = ({
  variant = "danger",
  className,
  type = "button",
  children,
  ...props
}) => {
  return (
    <button
      type={type}
      className={[styles.actionBtn, VARIANT_CLASS[variant], className]
        .filter(Boolean)
        .join(" ")}
      {...props}
    >
      {children}
    </button>
  );
};

export default ActionButton;