import React, { useState } from "react";
import CompanyAddEdit from "@/Components/Dashboard/CompanyBranchAddEdit/CompanyAddEdit";
import BranchAddEdit from "@/Components/Dashboard/CompanyBranchAddEdit/BranchAddEdit";

const SectionandLine = () => {
    const [activeTab, setActiveTab] = useState("section"); // Tracks the active tab
   
    return (
        <div className="w-full bg-white p-6 rounded-lg">
            {/* Tabs */}
            <div className=" border-gray-200 dark:border-neutral-700">
                <nav
                    className="flex gap-x-1"
                    aria-label="Tabs"
                    role="tablist"
                    aria-orientation="horizontal"
                >
                    <button
                        type="button"
                        className={`py-4 px-1 inline-flex items-center gap-x-2 border-b-2 text-sm whitespace-nowrap transition-all ${
                            activeTab === "section"
                                ? "border-blue-600 text-blue-600 font-semibold"
                                : "border-transparent text-gray-500 hover:text-blue-600"
                        }`}
                        onClick={() => setActiveTab("section")}
                        role="tab"
                        aria-selected={activeTab === "section"}
                        aria-controls="section-tab"
                    >
                        Add new section
                    </button>
                    <button
                        type="button"
                        className={`py-4 px-1 inline-flex items-center gap-x-2 border-b-2 text-sm whitespace-nowrap transition-all ${
                            activeTab === "line"
                                ? "border-blue-600 text-blue-600 font-semibold"
                                : "border-transparent text-gray-500 hover:text-blue-600"
                        }`}
                        onClick={() => setActiveTab("line")}
                        role="tab"
                        aria-selected={activeTab === "line"}
                        aria-controls="line-tab"
                    >
                        Add new line
                    </button>
                </nav>
            </div>

            {/* Tab Content */}
            <div className="p-5">
                {/* Tab 1 Content: Add new section */}
                {activeTab === "section" && (
                    <>
                    <CompanyAddEdit />
                    </>
                )}

                {/* Tab 2 Content: Add new line */}
                {activeTab === "line" && (
                    <>
                    <BranchAddEdit />
                    </>
                )}
            </div>
        </div>
    );
};

export default SectionandLine;
