import React from "react";
import { useParams } from "react-router-dom";
import Breadcrumb from "../../components/common/Breadcrumb";
import Profile from "../../components/Tenanat/profile";

const TenantDetails = () => {
    
  const tabs = [
    {
      id: "navs-left-home",
      label: "Profile",
      icon: "bx bx-user-circle",
      iconSize: "bx-sm", 
      content: <Profile/>,
    },
    {
      id: "navs-left-org",
      label: "Organization",
      icon: "bx bxs-business",
      iconSize: "bx-sm", // change to bx-xs, bx-md, bx-lg
      content: (
        <>
          <p>
            Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake...
          </p>
          <p className="mb-0">
            Tootsie roll fruitcake cookie. Dessert topping pie...
          </p>
        </>
      ),
    },
    {
      id: "navs-left-profile",
      label: "Settings",
      icon: "bx bx-cog",
      iconSize: "bx-sm",
      content: (
        <>
          <p>
            Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie...
          </p>
          <p className="mb-0">
            Jelly-o jelly beans icing pastry cake cake lemon drops...
          </p>
        </>
      ),
    },
    {
      id: "navs-left-messages",
      label: "Messages",
      icon: "bx bx-message-rounded",
      iconSize: "bx-sm",
      content: (
        <>
          <p>
            Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans...
          </p>
          <p className="mb-0">
            Cake chocolate bar cotton candy apple pie tootsie roll...
          </p>
        </>
      ),
    },
     {
      id: "navs-left-bill",
      label: "Bill",
      icon: "bx bx-receipt",
      iconSize: "bx-sm",
      content: (
        <>
          <p>
            Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans...
          </p>
          <p className="mb-0">
            Cake chocolate bar cotton candy apple pie tootsie roll...
          </p>
        </>
      ),
    },
  ];

  return (
    <div className="container-fluid py-0">
      <Breadcrumb
        data={[
          { label: "Home", link: "/dashboard" },
          { label: "Tenant", link: "/tenant" },
          { label: "Tenant Details", link: null },
        ]}
      />

      <div className="nav-align-left nav-tabs-shadow mb-6">
        <ul className="nav nav-tabs py-2 page-min-h" role="tablist">
          {tabs.map((tab, index) => (
            <li key={tab.id} className="nav-item">
              <button
                type="button"
                className={`nav-link d-flex align-items-center gap-2 ${index === 0 ? "active" : ""}`}
                role="tab"
                data-bs-toggle="tab"
                data-bs-target={`#${tab.id}`}
                aria-controls={tab.id}
                aria-selected={index === 0}
              >
                {tab.icon && <i className={`${tab.icon} ${tab.iconSize}`} />}
                {tab.label}
              </button>
            </li>
          ))}
        </ul>

        <div className="tab-content">
          {tabs.map((tab, index) => (
            <div
              key={tab.id}
              className={`tab-pane fade ${index === 0 ? "show active" : ""} text-start`}
              id={tab.id}
            >
              {tab.content}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default TenantDetails;