import { Blocks } from 'lucide-react';
import { walkFields } from '../schema-utils';
import { resolveIcon } from '@admin/components/Icon';
import { ModuleCard } from './ModuleCard';
import { ActiveModuleCard } from './ActiveModuleCard';

export function ModulesTab( { tab, onSave } ) {
	const modules = [];
	( tab?.children ?? [] ).forEach( ( group ) =>
		walkFields( group.children, ( row ) => modules.push( row ) )
	);

	return (
		<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
			{ modules.map( ( m ) =>
				m.isUpgradeable ? (
					<ModuleCard
						key={ m.id }
						icon={ resolveIcon( m.icon, Blocks ) }
						label={ m.label }
						description={ m.description }
						locked
						actionHref={ m.upgrade_url }
					/>
				) : (
					<ActiveModuleCard
						key={ m.id }
						fieldId={ m.id }
						icon={ resolveIcon( m.icon, Blocks ) }
						label={ m.label }
						description={ m.description }
						onSave={ onSave }
					/>
				)
			) }
		</div>
	);
}