import type { ComponentType, ReactNode } from "react";
import { Link } from "@/i18n/navigation";
import { cn } from "@/lib/utils";

interface SecondaryButtonProps {
  /** Optional aria-label for icon-heavy or short-label cases. */
  ariaLabel?: string;
  children: ReactNode;
  /** Optional extra classes appended (and merged via twMerge) to the defaults. */
  className?: string;
  href: string;
  /** Icon shown after the label. Pass a Tabler icon component (e.g. `IconArrowRight`). */
  icon?: ComponentType<{ className?: string; strokeWidth?: number }>;
}

// Outlined secondary CTA. Same width pattern as ContactButton (w-full mobile,
// w-fit desktop, centered) so the two never break visually side-by-side.
// No HoverBorderGradient — just a static border with hover state. This component
// replaces ~7 copy-pasted Link variants with `border border-white/20 hover:bg-white/5
// hover:border-[#FD105E]/50` across the codebase.
const base =
  "w-full sm:w-fit mx-auto justify-center inline-flex items-center gap-2 px-6 py-3 md:px-8 md:py-4 text-base md:text-lg bg-transparent border border-white/20 hover:bg-white/5 hover:border-[#FD105E]/50 text-white font-semibold rounded-xl transition-all duration-300";

export function SecondaryButton({
  href,
  children,
  icon: Icon,
  className,
  ariaLabel,
}: SecondaryButtonProps) {
  return (
    <Link aria-label={ariaLabel} className={cn(base, className)} href={href}>
      <span>{children}</span>
      {Icon && <Icon className="h-5 w-5" strokeWidth={1.5} />}
    </Link>
  );
}