import Link from "next/link";
import Image from "next/image";
import type { ReactNode } from "react";

type Variant = "solid" | "ghost" | "gradient";

interface ButtonProps {
  href: string;
  children: ReactNode;
  variant?: Variant;
  className?: string;
  withArrow?: boolean;
}

/**
 * Pill button matching the brand. `ghost` is the outlined white pill used
 * across the site ("See All Stories", "Explore Partnership"); `solid` is the
 * filled gradient CTA.
 */
export function Button({
  href,
  children,
  variant = "ghost",
  className = "",
  withArrow = true,
}: ButtonProps) {
  const base =
    "btn-pill px-5 py-3 text-sm";

  const variants: Record<Variant, string> = {
    ghost:
      "border border-line bg-paper text-ink shadow-soft hover:border-leaf/60 hover:shadow-lift",
    // Canva's partnership-page CTA: pale gradient fill + gradient border.
    gradient: "btn-gradient text-ink shadow-soft hover:shadow-lift",
    solid:
      "bg-gradient-to-r from-leaf-deep via-teal to-sky text-white shadow-lift hover:brightness-105",
  };

  // External links (e.g. the Calendly CTA URL) always open in a new tab;
  // internal site links keep normal same-tab navigation.
  const isExternal = /^https?:\/\//i.test(href);

  return (
    <Link
      href={href}
      target={isExternal ? "_blank" : undefined}
      rel={isExternal ? "noopener noreferrer" : undefined}
      className={`${base} ${variants[variant]} ${className}`}
    >
      <span>{children}</span>
      {withArrow && (
        <Image
          src="/home/growthsign.png"
          alt=""
          width={161}
          height={161}
          /* The PNG ships with a white background rather than alpha;
             multiply drops it out against the pale pill. */
          className="h-5 w-5 object-contain mix-blend-multiply"
        />
      )}
    </Link>
  );
}