import Link from "next/link";
import { JSX } from "react";

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  href?: string;
  variant?: "primary" | "secondary" | "ghost" | "outline-white" | "ghost-white";
  className?: string;
}

export function Button({
  children,
  href,
  variant = "primary",
  className = "",
  type = "button",
  ...props
}: ButtonProps) {
  const base =
    "inline-flex items-center justify-center px-6 py-3 text-sm font-medium transition-all duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none cursor-pointer";

  const variants = {
    primary: "bg-primary text-secondary hover:opacity-90 border border-transparent",
    secondary: "bg-transparent border border-primary text-primary hover:bg-primary hover:text-secondary",
    ghost: "text-primary hover:bg-neutral/50",
    "outline-white": "border border-secondary text-secondary hover:bg-secondary hover:text-primary",
    "ghost-white": "text-secondary hover:bg-secondary/10",
  };

  const selectedVariant = variants[variant] || variants.primary;
  const combinedClasses = `${base} ${selectedVariant} ${className}`;

  if (href) {
    return (
      <Link href={href} className={combinedClasses}>
        {children}
      </Link>
    );
  }

  return (
    <button type={type} className={combinedClasses} {...props}>
      {children}
    </button>
  );
}