import { ReactNode } from "react";

interface ButtonProps {
  children: ReactNode;
  icon?: JSX.Element;
  color?: "primary" | "secondary";
  width?: "fit" | "full";
  disabled?: boolean;
  className?: string;
  onClick?: () => void;
}

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

export default Button;
