import { Item } from "../interfaces/Item";

interface Props {
  items: Item[];
  componentSelected?: Item;
  setComponentSelected: (value: Item) => void;
  submenu?: boolean;
}

export function SidebarComponents({
  items,
  componentSelected,
  setComponentSelected,
  submenu,
}: Props) {
  const itemsOrdered = items.sort((a, b) => {
    if (a === undefined) return 1;
    if (b === undefined) return -1;
    if (a < b) return -1;
    if (a > b) return 1;
    return 0;
  });

  return (
    <div>
      {itemsOrdered.map((item, key) => {
        const selected =
          componentSelected?.name === item.name &&
          componentSelected?.scope === item.scope &&
          componentSelected?.group === item.group;

        return (
          <div
            key={key}
            className={
              "cb-cursor-pointer hover:cb-text-black dark:cb-text-slate-400 cb-text-slate-500 cb-text-xs hover:cb-bg-slate-100 dark:hover:cb-bg-slate-700 cb-py-[5px] cb-px-2 " +
              (submenu ? "!cb-pl-5 " : "") +
              (selected
                ? "!cb-text-black dark:!cb-text-white cb-font-bold"
                : "")
            }
            onClick={() => setComponentSelected(item)}
          >
            {item.name}
          </div>
        );
      })}
    </div>
  );
}