import { FaArrowDown } from "react-icons/fa";

const ScrollDownArrow = ({ targetId }) => {
  const scrollToSection = () => {
    const target = document.getElementById(targetId);
    if (target) {
      target.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <div
      onClick={scrollToSection}
      style={{
        position: "absolute",
        bottom: "20px",
        left: "50%",
        transform: "translateX(-50%)",
        cursor: "pointer",
        zIndex: 50,
        fontSize: "2rem",
        color: "white",
        animation: "bounce 1.5s infinite",
      }}
    >
      <FaArrowDown />
    </div>
  );
};

export default ScrollDownArrow;
