import React from "react";
import { Link, useLocation } from "react-router-dom";

interface Tab {
  id: string;
  label: string;
  path: string;
}

interface SettingsTabLayoutProps {
  tabs: Tab[];
  children: React.ReactNode;
  basePath: string;
}

export const SettingsTabLayout: React.FC<SettingsTabLayoutProps> = ({
  tabs,
  children,
  basePath,
}) => {
  const location = useLocation();

  return (
    <div className="settings-layout">
      <aside className="settings-sidebar">
        <nav className="settings-nav">
          {tabs.map((tab) => (
            <Link
              key={tab.id}
              to={`${basePath}/${tab.path}`}
              className={`settings-nav-link ${
                location.pathname.includes(tab.path) ? "active" : ""
              }`}
            >
              {tab.label}
            </Link>
          ))}
        </nav>
      </aside>
      <main className="settings-content">{children}</main>
    </div>
  );
};
