import React from "react";

interface SecondaryButtonProps {
  text: string;
  targetId: string; // ← NEW: pass the section ID
  className?: string;
}

const SecondaryButton: React.FC<SecondaryButtonProps> = ({
  text,
  targetId,
  className = "",
}) => {
  const handleScroll = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    const section = document.getElementById(targetId);
    if (section) {
      const yOffset = -80;
      const y =
        section.getBoundingClientRect().top + window.pageYOffset + yOffset;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  };

  return (
    <a
      href={`/#${targetId}`} // ← valid internal hash link
      onClick={handleScroll}
      className={`font-mium-reg text-b-2-17 h-[52px] w-max min-w-40 cursor-pointer rounded-full border border-white bg-transparent px-6 py-3 text-center font-normal tracking-[-0.8px] text-white hover:border-white/80 hover:bg-white/10 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 ${className} `.trim()}
    >
      {text}
    </a>
  );
};

export default SecondaryButton;