"use client"
import React from 'react' 
import Image from 'next/image';
 
 
interface ScrollButtonProps {
  targetId: string; // Kaydırılacak öğenin ID'si
  label: string; // Buton üzerinde gösterilecek metin,
  icon? : string
}

const ScrollButton: React.FC<ScrollButtonProps> = ({ targetId, label, icon }) => {
  const handleScroll = () => {
    const element = document.getElementById(targetId);
    element?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <button
    className='flex min-h-12 w-full whitespace-nowrap border border-transparent bg-gri px-5 py-2 font-semibold gap-3 justify-center items-center transition hover:border-primary sm:w-auto'
      onClick={handleScroll} >
       
       { icon && <Image src={icon} alt='' width={10} height={25} /> }
       <span> {label} </span>

    </button>
  );
};

export default ScrollButton;