import type { ButtonHTMLAttributes, ReactNode } from "react";
import Link from "next/link";
import { FaSpinner } from "react-icons/fa6";
import CustomLink from "./CustomLink";

type ButtonVariant = "primary" | "white";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: ReactNode;
  variant?: ButtonVariant;
  icon?: ReactNode;
  href?: string;
  className?: string;
  buttonClassName?: string;
  BtnInnerclassName?: string;

  loading?: boolean;
}

export default function Button({
  children,
  variant = "primary",
  icon = null,
  href = "",
  className = "",
  buttonClassName = "",
  BtnInnerclassName = "",
  loading,
  ...props
}: ButtonProps) {
  const isLink = Boolean(href);

  const content =
    variant === "white" ? (
      <span
        className={`
          bg-white font-body text-base px-3 2xl:px-4 py-2.5 xl:py-3 2xl:py-3.5 flex items-center justify-center
          gap-1 2xl:gap-2 rounded-full font-medium leading-none tracking-normal text-center
          cursor-pointer text-purple-900 w-full h-full ${BtnInnerclassName}
        `}
      >
        {icon && <span className="shrink-0">{icon}</span>}
        {children}
      </span>
    ) : (
      <span
        className={`
          gradient1 cursor-pointer font-body text-base px-3 2xl:px-4 py-2.5 xl:py-3 2xl:py-3.5 flex items-center
          justify-center gap-1 2xl:gap-2 rounded-full font-medium leading-none tracking-normal
          text-center text-white w-full h-full ${BtnInnerclassName}
        `}
      >
        {icon && <span className="shrink-0">{icon}</span>}
        {children}
      </span>
    );

  const wrapperClass = `inline-flex rounded-full ${className}`;

  const buttonClass =
    variant === "white"
      ? `
        gradient1 rounded-full p-px shadow-button cursor-pointer transition-all
        duration-300 hover:scale-[1.02] w-full text-center ${buttonClassName}
        disabled:cursor-not-allowed
      `
      : `
        button-outline rounded-full p-px shadow-button cursor-pointer transition-all
        duration-300 w-full text-center hover:scale-[1.02] ${buttonClassName}
        disabled:cursor-not-allowed
      `;

  if (isLink) {
    return (
      <CustomLink href={href} className={wrapperClass}>
        <span className={buttonClass}>{content}</span>
      </CustomLink>
    );
  }

  return (
    <div className={wrapperClass}>
      {!loading ? (
        <button {...props} className={buttonClass}>
          {content}
        </button>
      ) : (
        <button disabled className={buttonClass}>
          <span
            className={`
      ${
        variant === "white"
          ? "bg-white text-purple-900"
          : "gradient1 text-white"
      }
      font-body text-base px-4 py-3.5 flex items-center justify-center
      gap-2 rounded-full font-medium leading-none tracking-normal
      text-center w-full h-full ${BtnInnerclassName}
    `}
          >
            <FaSpinner className="size-5 animate-spin shrink-0" />
          </span>
        </button>
      )}
    </div>
  );
}