import React from "react";
import "../../Style/common.css"; // Общие стили для табов

const Tabs = ({ tabs, activeTab, onTabClick, onCloseTab }) => {
    const handleMouseDown = (e, id) => {
        // Проверяем, была ли нажата средняя кнопка мыши (button === 1)
        if (e.button === 1) {
            e.preventDefault(); // Предотвращаем стандартное поведение (например, прокрутку)
            onCloseTab(id); // Закрываем вкладку
        }
    };
    

    return (
        <div className="tabs">
            {/* Всегда отображаемые вкладки */}
            <div
                className={`tab ${activeTab === "Главная" ? "active" : ""}`}
                onClick={() => onTabClick("Главная")}
                onMouseDown={(e) => handleMouseDown(e, "Главная")} // Добавляем обработчик для СКМ
            >
                <span>Главная</span>
            </div>
            <div
                className={`tab ${activeTab === "Визуализация" ? "active" : ""}`}
                onClick={() => onTabClick("Визуализация")}
                onMouseDown={(e) => handleMouseDown(e, "Визуализация")} // Добавляем обработчик для СКМ
            >
                <span>Визуализация</span>
            </div>

            {/* Динамически добавляемые вкладки */}
            {tabs.map((tab) => (
                <div
                    key={tab.id}
                    className={`tab ${activeTab === tab.id ? "active" : ""}`}
                    onClick={() => onTabClick(tab.id)}
                    onMouseDown={(e) => handleMouseDown(e, tab.id)} // Добавляем обработчик для СКМ
                >
                    <span>{tab.title}</span>
                    <button
                        className="close-tab"
                        onClick={(e) => {
                            e.stopPropagation();
                            onCloseTab(tab.id);
                        }}
                    >
                        ×
                    </button>
                </div>
            ))}
        </div>
    );
};

export default Tabs;