import React from "react";
import { Link as LinkRouter, BrowserRouter } from "react-router-dom";
import cx from "classnames"
import './style.scss'
import { NavLinkProps } from "./types";
import { useLocale } from "../../hooks/useLocale";

export const Link: React.FC<NavLinkProps> = ({
  allCaps = false,
  isDisabled = false,
  openNewTab = false,
  onClick,
  className,
  text, 
  dest
}) => {
  const label = useLocale(text)
  return (
    <>
      <BrowserRouter>
        <LinkRouter
          className={cx('link-gtc-rc', className)} 
          to={dest && !isDisabled ? dest : ''} 
          onClick={onClick && !isDisabled ? onClick : () => {}} 
          target={`${openNewTab ? "_blank" : ""}`}>
            {allCaps ? label.toUpperCase() : label}
        </LinkRouter>
      </BrowserRouter>
    </>
  );
};