import classNames from "classnames";

import Item from "components/services/item";

const columnMap = [
  "grid-cols-1 md:grid-cols-1 lg:grid-cols-1",
  "grid-cols-1 md:grid-cols-1 lg:grid-cols-1",
  "grid-cols-1 md:grid-cols-2 lg:grid-cols-2",
  "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
  "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
  "grid-cols-1 md:grid-cols-2 lg:grid-cols-5",
  "grid-cols-1 md:grid-cols-2 lg:grid-cols-6",
  "grid-cols-1 md:grid-cols-2 lg:grid-cols-7",
  "grid-cols-1 md:grid-cols-2 lg:grid-cols-8",
];

export default function List({ group, services, layout, isGroup = false }) {
  //console.log({ group, services, layout });
  console.log({ services });
  return (
    <ul
      className={classNames(
        layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col",
        isGroup ? undefined : "mt-3"
      )}
    >
      {services.map((service, i) => {
        return service.type == "grouped-service" ? (
          <List
            key={service.name}
            group={service.name}
            services={service.services}
            layout={{ columns: parseInt(service.name) || service.services.length, style: "row" }}
            isGroup={true}
          />
        ) : (
          <Item key={service.container ?? service.app ?? service.name} service={service} group={group} />
        );
      })}
    </ul>
  );
}
