import { PropsWithChildren } from 'react';
import { Link, useLocation } from 'react-router-dom';

export function AnchorLink({
  children,
  route,
  className = '',
}: PropsWithChildren<{
  route: string;
  className?: string;
}>) {
  const { hash } = useLocation();
  return (
    <Link
      className={
        'btn-text font-semibold border-l last:border-r border-[#3D425C] hidden py-[30px] px-10 xl:flex items-center hover:bg-[#3D425C] active:bg-[#14161F] outline-none ' +
        className
      }
      onClick={() => {
        if (hash === route) {
          document
            .getElementById(hash.slice(1))
            ?.scrollIntoView({
              behavior: 'smooth',
              inline: 'nearest',
              block: 'start',
            });
        }
      }}
      to={route}
    >
      {children}
    </Link>
  );
}
