import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";

function SubMenu({ items }) {
  const { t } = useTranslation();
  return (
    <div className="absolute left-0 z-50 invisible transition-all duration-200 -translate-y-6 shadow-sm opacity-0 top-full border-t-3 border-primary dark:border-primary-dark bg-secondary dark:bg-secondary-dark rounded-2xl shadow-surface-variant-dark dark:shadow-primary group-hover:visible group-hover:translate-y-0 group-hover:opacity-100">
      {items.map((subItem, index) => (
        <div key={index} className="px-6 py-2 cursor-pointer text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark first:rounded-t-2xl second-last:rounded-b-2xl first:pt-4 last:pb-4">
          <Link to={subItem.path}>{t(subItem.name)}</Link>
        </div>
      ))}
      <svg className="absolute top-0 left-6 mt-[-13px] fill-primary dark:fill-primary-dark" width="16" height="13" viewBox="0 0 16 13" xmlns="http://www.w3.org/2000/svg">
        <path d="M6.26795 1C7.03775 -0.333332 8.96225 -0.333334 9.73205 0.999999L14.9282 10C15.698 11.3333 14.7358 13 13.1962 13H2.80385C1.26425 13 0.301996 11.3333 1.0718 10L6.26795 1Z" />
      </svg>
    </div>
  );
};

function MenuBar({ menuItems }) {
  const { t } = useTranslation();
  return (
    <div className="flex justify-between pt-5 pb-2 text-base font-body">
      {menuItems.map((item, index) =>
        <div key={index} className="relative pb-3 cursor-pointer group">
          {t(item.name)}
          {item.submenu.length > 0 && <SubMenu items={item.submenu} />}
        </div>
      )}
    </div>
  );
}

MenuBar.propTypes = {
  menuItems: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      submenu: PropTypes.arrayOf(
        PropTypes.shape({
          name: PropTypes.string.isRequired,
          path: PropTypes.string.isRequired,
        })
      ),
      path: PropTypes.string
    })
  ).isRequired
};

SubMenu.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      path: PropTypes.string.isRequired
    })
  ).isRequired
};

export default MenuBar;