"use client";
import { useState, useEffect } from "react";
import Link from "next/link";
import { ReactNode } from "react";
interface ScrollLinkProps {
  id: string;
  children: ReactNode;
}
export default function ScrollLink({ id, children }:ScrollLinkProps) {
  const handleClick = (e:any) => {
    e.preventDefault();
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    }
  };
 
  return (
    <Link href={`#${id}`} passHref
        className="inline-flex capitalize text-xs py-2 underline underline-offset-4 hover:decoration-amber-600"
    >
      <div onClick={handleClick}>{children}</div>
    </Link>
  );
}