import React from "react";
import Button, { ButtonProps } from "antd/es/button";
import { cn } from "@/lib/utils";

type AppButtonProps = {
  children: React.ReactNode;
  type?: "default" | "primary" | "dashed" | "link" | "text";
  shape?: "circle" | "round" | "default";
  iconPosition?: "start" | "end";
  disabled?: boolean;
  loading?: boolean;
  onClick?: (data?: any) => void;
  className?: string;
  style?: React.CSSProperties;
  size?: "large" | "middle" | "small";
  icon?: React.ReactNode;
  color?: "default" | "primary";
  variant?: "outlined" | "dashed" | "solid" | "filled" | "text" | "link";
  htmlType?: "button" | "submit" | "reset";
  primaryColor?: "blue" | "red" | "grey";
} & ButtonProps;

export default function AppButton({
  children,
  type = "primary",
  size = "middle",
  icon,
  disabled = false,
  loading = false,
  onClick,
  className,
  style,
  shape,
  color = "primary",
  iconPosition = "start",
  variant,
  htmlType = "button",
  primaryColor = undefined,
  ...props
}: AppButtonProps) {
  const getColorClasses = () => {
    if (type !== "primary" || !primaryColor) return;

    switch (primaryColor) {
      case "red":
        return "!bg-red-500 hover:!bg-red-600 text-white px-3 py-2";
      case "grey":
        return "!bg-neutral-500 hover:!bg-neutral-600 text-white px-3 py-2";
      case "blue":
      default:
        return "bg-blue-500 hover:!bg-blue-600 text-white px-3 py-2";
    }
  };

  return (
    <Button
      color={color}
      htmlType={htmlType}
      type={type}
      variant={variant}
      size={size}
      icon={icon}
      shape={shape}
      disabled={disabled}
      loading={loading}
      onClick={onClick}
      iconPosition={iconPosition}
      className={cn(
        className,
        primaryColor && getColorClasses(),
        disabled && type === "primary" && "hover:!bg-neutral-100",
      )}
      style={style}
      {...props}
    >
      {children}
    </Button>
  );
}