import { Link } from '@inertiajs/react'
import React from 'react'
import { MENU_ICON_MAP } from "../configs/menuConfig";

function NavChild({ lable = '', to, active = false, icone = "" }) {
  const getLucideIcon = (name = "") => MENU_ICON_MAP[name] || null;

  return (
    <li className="side-bar-nav-item rounded-md ">
      <Link
        href={route(to)}
        className={`js-more-trigger flex items-center gap-2 cursor-pointer rounded-lg px-2 py-2 text-sm font-medium transition-colors ${active
          ? "bg-blue-50 text-blue-700 border-l-2 border-blue-600 -ml-[2px] pl-[10px]"
          : "text-slate-900 hover:bg-slate-50 hover:text-black"
          }`}
      >
        {icone &&
          (() => {
            const IconComponent =
              typeof icone === "string" ? getLucideIcon(icone) : icone;

            if (!IconComponent) return null;

            return (
              <IconComponent
                className={`w-[18px] h-[18px] ${active ? "text-blue-600" : "text-slate-700"
                  }`}
              />
            );
          })()}
        <span className="truncate">{lable}</span>
      </Link>
    </li>
  )
}

export default NavChild