import React from "react";
import Style from "./Links.module.css";
import Link from "next/link";
import { useRouter } from "next/router";
import Image from "next/image";

const Links = ({
  link,
  name,
  icon,
  activeFor,
  iconWrapper,
}: {
  link?: string;
  name?: string;
  icon?: string;
  iconWrapper?: React.ReactNode;
  activeFor?: string;
}) => {
  const router = useRouter();

  return (
    <Link
      href={link ?? ""}
      className={`${Style.linkStyle} ${router.pathname === link || router.pathname === activeFor
        ? Style.active
        : ""
        }`}
    >
      {iconWrapper && !icon && iconWrapper}
      {icon && name && <Image src={icon} alt={name} width={100} height={100} />}
      <span>{name}</span>
    </Link>
  );
};

export default Links;