'use client'

import { HTMLAttributes, useCallback } from "react";
import * as React from "react";


interface ScrollProps extends HTMLAttributes<HTMLButtonElement> {
  className?: string;
  children?: React.ReactNode;
  to: string;
}

const Scroll = React.forwardRef<HTMLButtonElement, ScrollProps>(
  ({ className, children, to, ...props }, ref) => {
    const handleClick = useCallback((e: { preventDefault: () => void; }) => {
      e.preventDefault();
      const element = document.getElementById(to);
      if (element) {
        element.scrollIntoView({ behavior: "smooth" });
      }
    }, [to]);
    return (
      <button
        {...props}
        ref={ref}
        onClick={handleClick}
        className={className}
      >
        {children}
      </button>
    );
  }
);

Scroll.displayName = "Scroll";

export { Scroll };