import { HoverBorderGradient } from "@/components/ui/hover-border-gradient";
import { cn } from "@/lib/utils";

interface ContactButtonProps {
  children: React.ReactNode;
  className?: string;
  containerClassName?: string;
  href?: string;
  variant?: "primary" | "secondary";
}

// Width pattern: w-full mobile (stack), w-fit desktop (content-sized — NOT
// w-auto, which on block-level flex stretches to parent and breaks the inner
// border alignment). Centering is the parent's job (flex justify-center or
// text-center). Don't put mx-auto here — in a flex-row parent it consumes free
// space and pushes siblings to opposite edges.
const containerBase = "w-full sm:w-fit";
const innerBase =
  "w-full sm:w-auto justify-center inline-flex items-center gap-2 px-8 py-4 text-base font-semibold transition-colors duration-300";

const variantClasses = {
  primary: "bg-[#fd105e] hover:bg-[#fd105e]/90 text-white",
  secondary: "bg-transparent hover:bg-white/5 text-white",
} as const;

export function ContactButton({
  href = "/contact",
  variant = "primary",
  className,
  containerClassName,
  children,
}: ContactButtonProps) {
  return (
    <HoverBorderGradient
      className={cn(innerBase, variantClasses[variant], className)}
      containerClassName={cn(containerBase, containerClassName)}
      href={href}
    >
      {children}
    </HoverBorderGradient>
  );
}