import React from 'react';
import navigationIcon from '@/configs/navigation-icon.config';
import { MenuItem } from '@/components/ui';
import HorizontalMenuNavLink from './HorizontalMenuNavLink';
import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router-dom';

const HorizontalMenuItem = ({ nav, isLink, manuVariant }) => {
  const { title, translateKey, icon, path } = nav;
  const location = useLocation();
  const currentPath = location.pathname;
  const { t } = useTranslation();
  const itemTitle = t(translateKey, title);

  return (
    <MenuItem variant={manuVariant} isActive={currentPath.startsWith(path)}>
      {path && isLink ? (
        <HorizontalMenuNavLink path={path} icon={icon}>
          {itemTitle}
        </HorizontalMenuNavLink>
      ) : (
        <>
          {icon && <span className="text-2xl px-1">{navigationIcon[icon]}</span>}
          <span>{itemTitle}</span>
        </>
      )}
    </MenuItem>
  );
};

export default HorizontalMenuItem;
