import classNames from "classnames";
import LinkComp from "next/link";
import { useRouter } from "next/router";
import { FormattedMessage } from "react-intl";

export const Link = ({
  name,
  link,
  comingSoon,
}: {
  name: string;
  link: string;
  comingSoon?: boolean;
}) => {
  const { pathname } = useRouter();

  return comingSoon ? (
    <li className="flex items-center justify-start gap-3 text-white text-center text-opacity-80 font-medium text-sm tracking-wide cursor-not-allowed">
      <span className="text-opacity-50">
        <FormattedMessage id={name} />
      </span>
      <span className="text-xs bg-yellow bg-opacity-90 text-white rounded-full px-2 py-1 text-opacity-100 text-center">
        <FormattedMessage id="badge.comingSoon" />
      </span>
    </li>
  ) : (
    <LinkComp key={name} href={link}>
      <li
        className={classNames(
          "flex items-center text-center justify-start gap-3 text-white opacity-80 hover:opacity-100 font-medium text-sm tracking-wide",
          {
            "!opacity-100": pathname === link,
          }
        )}
      >
        <FormattedMessage id={name} />
      </li>
    </LinkComp>
  );
};