import React, { useState } from "react";

export default function NetworkMonitor(args) {
    const [selectedTab, setSelectedTab] = useState("interfaces");
    const tabs = [
        { id: "interfaces", label: "Интерфейсы" },
        { id: "topology", label: "Топология сети" },
    ];
    const handleTabClick = (tabId) => {
        setSelectedTab(tabId);
    };
    return (
        <>
            <div className="flex justify-center md:justify-start">
                {/* Контейнер для вкладок */}
                <div className="flex p-2 bg-gray-100 dark:bg-gray-900 gap-2 rounded-lg shadow-sm">
                    {tabs.map((tab) => (
                        <button
                            key={tab.id}
                            onClick={() => handleTabClick(tab.id)}
                            className={`rounded-lg px-4 py-2 text-gray-900 dark:text-gray-100  ${selectedTab === tab.id
                                ? "bg-gray-200 dark:bg-gray-800 text-orange-600 font-semibold"
                                : "hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-600 duration-300"
                                }`}
                        >
                            {tab.label}
                        </button>
                    ))}
                </div>
            </div>
            <div className="mt-6">

            </div>
        </>
    );
}