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

interface ButtonProps {
  children: ReactNode;
  icon?: ReactElement;
  color?: "primary" | "secondary";
  width?: "fit" | "full";
  disabled?: boolean;
  className?: string;
  onClick?: () => void;
  type?: "submit" | "reset" | "button";
  rounded?: string;
}

export function Button({
  children,
  color = "primary",
  icon,
  width = "fit",
  disabled = false,
  className,
  onClick,
  type,
  rounded,
}: ButtonProps) {
  const widthClass = width === "full" ? "w-full" : "w-fit";
  return (
    <button
      type={type}
      disabled={disabled}
      onClick={(e) => {
        if (type !== "submit") e.preventDefault();
        onClick?.();
      }}
      className={`group cursor-pointer relative px-6 py-2${
        rounded ? " rounded-" + rounded : ""
      } min-w-fit ${
        (color === "primary" ? "bg-gradient" : "") ||
        (color === "secondary" ? " outline-1 outline-[#3D425C]" : "")
      } ${icon ? "pr-4" : ""} flex gap-1 items-center overflow-hidden ${widthClass} ${className ?? ""} justify-between`}
    >
      <span className="group-hover:opacity-10 absolute top-0 left-0 w-full h-full transition-opacity bg-black opacity-0"></span>
      <span className={"relative font-medium" + (icon ? "" : " m-auto")}>
        {children}
      </span>
      <span className="relative">{icon}</span>
    </button>
  );
}
