import type { ButtonHTMLAttributes, ReactNode } from "react";
import Link from "next/link";

type ButtonVariant = "primary" | "white";

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

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

  const content =
    variant === "white" ? (
      <span
        className={`
          bg-white font-body text-lg px-5 py-4.5 flex items-center justify-center
          gap-2 rounded-full font-medium leading-none tracking-normal text-center
          cursor-pointer text-purple-900 ${BtnInnerclassName}
        `}
      >
        {icon && <span className="shrink-0">{icon}</span>}
        {children}
      </span>
    ) : (
      <span
        className={`
          gradient1 cursor-pointer font-body text-lg px-5 py-4.5 flex items-center
          justify-center gap-2 rounded-full font-medium leading-none tracking-normal
          text-center text-white ${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}
      `
      : `
        button-outline rounded-full p-px shadow-button cursor-pointer transition-all
        duration-300 w-full text-center hover:scale-[1.02] ${buttonClassName}
      `;

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

  return (
    <div className={wrapperClass}>
      <button {...props} className={buttonClass}>
        {content}
      </button>
    </div>
  );
}