import React, { ReactElement, Suspense, useState } from "react";
import { isNil } from "lodash";
interface TabItem {
id: number;
name: string;
icon: React.ReactNode;
content: React.ReactNode;
shouldShow?: boolean;
}
interface TabControlsProps {
filteredTabs: TabItem[];
downloadCount: number;
activeTab?: number;
setActiveTab?: (id: number) => void;
}
export const TabControls = (props: TabControlsProps): ReactElement => {
const { filteredTabs, downloadCount, activeTab, setActiveTab } = props;
const [active, setActive] = useState(filteredTabs[0].id);
// Use controlled state if provided, otherwise use internal state
const currentActive = activeTab !== undefined ? activeTab : active;
const handleSetActive = (id: number) => {
if (setActiveTab) {
setActiveTab(id);
} else {
setActive(id);
}
};
return (
<>
{filteredTabs.map(({ id, content }: TabItem) => (
{currentActive === id ? content : null}
))}
);
};
export default TabControls;