import { useLead } from "./LeadProvider";
import { ArrowRight } from "lucide-react";

type Props = {
  children: React.ReactNode;
  source?: string;
  variant?: "gold" | "outline" | "dark";
  size?: "md" | "lg";
  className?: string;
  icon?: boolean;
};

export function CTAButton({ children, source = "cta", variant = "gold", size = "md", className = "", icon = true }: Props) {
  const { openLead } = useLead();
  const base = "inline-flex items-center justify-center gap-2 font-semibold rounded-lg transition hover:shadow-luxury group";
  const sizes = size === "lg" ? "px-7 py-4 text-base" : "px-5 py-3 text-sm";
  const variants = {
    gold: "gradient-gold text-black",
    outline: "border-2 border-gold text-gold hover:bg-gold hover:text-black",
    dark: "bg-foreground text-background hover:opacity-90",
  } as const;
  return (
    <button onClick={() => openLead(source)} className={`${base} ${sizes} ${variants[variant]} ${className}`}>
      {children}
      {icon && <ArrowRight size={16} className="group-hover:translate-x-1 transition" />}
    </button>
  );
}