import React from "react";
import Link from "next/link";

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary" | "outline" | "whatsapp" | "accent";
  size?: "sm" | "md" | "lg";
  href?: string;
  icon?: React.ReactNode;
  children: React.ReactNode;
}

export const Button: React.FC<ButtonProps> = ({
  variant = "primary",
  size = "md",
  href,
  icon,
  children,
  className = "",
  ...props
}) => {
  const baseStyles =
    "inline-flex items-center justify-center whitespace-nowrap font-bold tracking-wide rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 active:scale-95 disabled:opacity-50 disabled:pointer-events-none";

  const sizeStyles = {
    sm: "px-3 py-1.5 text-xs gap-1.5",
    md: "px-4 py-2 text-sm gap-2",
    lg: "px-6 py-3 text-base gap-2.5 shadow-md",
  };

  const variantStyles = {
    primary:
      "bg-[#f4611e] text-white hover:bg-[#d94f14] focus:ring-[#f4611e] shadow-sm hover:shadow-md",
    secondary:
      "bg-amber-500 text-white hover:bg-amber-600 focus:ring-amber-500 shadow-sm",
    outline:
      "border-2 border-[#5C7A36] text-[#5C7A36] hover:bg-[#5C7A36] hover:text-white focus:ring-[#5C7A36]",
    whatsapp:
      "bg-[#1faf38] text-white hover:bg-[#19922e] focus:ring-[#1faf38] shadow-sm",
    accent:
      "bg-slate-900 text-white hover:bg-slate-800 focus:ring-slate-900 shadow-sm",
  };

  const combinedClasses = `${baseStyles} ${sizeStyles[size]} ${variantStyles[variant]} ${className}`;

  if (href) {
    const isExternal = href.startsWith("http");
    return (
      <Link
        href={href}
        className={combinedClasses}
        target={isExternal ? "_blank" : undefined}
        rel={isExternal ? "noopener noreferrer" : undefined}
      >
        {icon && <span className="shrink-0">{icon}</span>}
        <span>{children}</span>
      </Link>
    );
  }

  return (
    <button className={combinedClasses} {...props}>
      {icon && <span className="shrink-0">{icon}</span>}
      <span>{children}</span>
    </button>
  );
};