import React, { useState, useEffect } from "react";
import { HomeOutlined } from '@ant-design/icons-svg';
import { Menu } from "antd";
import { Home } from "../../pages";
import { getRoom } from "../../api/room";
function getItem(label, key, type, icon, children) {
  return {
      key: String(key),
      icon,
      children,
      label,
      type,
  };
}

// Component
const Navbar = () => {
  //Hook calls
    const [rooms, setRooms] = useState([]);

  useEffect(() => {
      if (true) {
        getRoom().then((result) => {
        setRooms(result);
      });
    }
  }, []);

    const roomItems = rooms.map((room, index) => (
        getItem(room.name, `sub${index}`, <Home />)
    ));

    const items = [
        getItem("Menu principal", "1", <Home />),
        getItem("Vue d'ensemble", "2", <Home />),
        {
            key: "3",
            label: "Chambres",
            icon: "",
            children: roomItems, // Utilisation des éléments de menu des chambres
        },
    ];

    // Rendu du composant Navbar
    return (
        <Menu
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            theme="dark"
            mode="inline"
            items={items}
        />
    );
};
export default Navbar;