import classNames from "classnames";
import Link from "next/link";
import React from "react";
import useIsRtl from "../../particles/hooks/useIsRtl";

import styles from "./Menu.module.scss";

const Menu = ({ items, selectedId }: any) => {
  const isRtl = useIsRtl();

  return (
    <nav className={styles.menu}>
      <ul>
        {items.map(({ id, name, url }: any) => {
          if (url) {
            return (
              <a key={id} href={url} target="_blank" rel="noreferrer">
                {name}
              </a>
            );
          }

          return (
            <Link key={id} href={`/services/${id}`}>
              <li className={classNames({ active: id == selectedId })}>
                {name} &nbsp; {isRtl ? <span>&#9666;</span> : <span>&#9656;</span>}
              </li>
            </Link>
          );
        })}
      </ul>
    </nav>
  );
};

export default Menu;