import React, { ForwardedRef, forwardRef } from 'react';
import { StyledNextLink } from '@/components/common/NextLink/NextLink.style';
import { useLocale } from 'next-intl';
import { usePathname } from 'next/navigation';

interface IMyLink extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
    children?: React.ReactNode;
    href: string;
    className?: string;
    [key: string]: any;
}

const NextLink = ({ href, className, children, ...props }: IMyLink, ref: ForwardedRef<HTMLAnchorElement>) => {
    const pathname = usePathname();
    const locale = useLocale();

    return (
        <StyledNextLink
            href={`/${locale}${href}`}
            className={className + (pathname.includes(href) ? ' active-navlink' : '')}
            {...props}
            prefetch={false}
            ref={ref}
        >
            {children}
        </StyledNextLink>
    );
};

export default forwardRef(NextLink);
