import React, { useState } from "react";
import "./SidebarMenu.css";  // Импортируем стили для компонента

const menuItems = [
    {
        title: "Выбор сервиса",
        items: ["Сервис ВКС", "Сервис 2", "Сервис 3"],
    },
    {
        title: "Функциональные задачи",
        items: ["Контроль системы", "Система управления", "Проведение ВКС", "Резервное копирование", "Ретрансляция информации"],
    },
    {
        title: "Программное обеспечение",
        items: ["ПО 1", "ПО 2", "ПО 3"],
    },
    {
        title: "Аппаратное обеспечение",
        items: ["Оборудование 1", "Оборудование 2", "Оборудование 3"],
    },
];

function SidebarMenu() {
    const [openSections, setOpenSections] = useState({});

    const toggleSection = (title) => {
        setOpenSections((prev) => ({ ...prev, [title]: !prev[title] }));
    };

    return (
        <div className="sidebar">
            <h2 className="sidebar-title">Меню</h2>
            {menuItems.map((section) => (
                <div key={section.title} className="sidebar-section">
                    <button
                        onClick={() => toggleSection(section.title)}
                        className="sidebar-button"
                    >
                        {section.title}
                    </button>
                    {openSections[section.title] && (
                        <ul className="sidebar-items">
                            {section.items.map((item) => (
                                <li key={item} className="sidebar-item">
                                    {item}
                                </li>
                            ))}
                        </ul>
                    )}
                </div>
            ))}
        </div>
    );
}

export default SidebarMenu;