import React from "react";
import { Link, useLocation } from "react-router-dom";
import styles from "./SettingsTabLayout.module.css";

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={styles.settingsLayout}>
			<aside className={styles.settingsSidebar}>
				<nav className={styles.settingsNav}>
					{tabs.map((tab) => (
						<Link
							key={tab.id}
							to={`${basePath}/${tab.path}`}
							className={`${styles.settingsNavLink} ${
								location.pathname.includes(tab.path)
									? styles.settingsNavLinkActive
									: ""
							}`}
						>
							{tab.label}
						</Link>
					))}
				</nav>
			</aside>
			<main className={styles.settingsContent}>{children}</main>
		</div>
	);
};