import { useMemo, useState, type ReactNode } from 'react'; import { NavIcon } from './NavIcon'; import type { SettingsField, SettingsSection } from '../types/settingsSchema'; import { __ } from '../lib/i18n'; type Props = { tabSchema: SettingsSection[]; renderField: (f: SettingsField) => React.ReactNode; }; function sectionIconName(raw?: string): string { const s = (raw || '').trim(); const fa = s.replace(/^fas\s+fa-/, '').replace(/^fa-/, ''); switch (fa) { case 'list': return 'course'; case 'star': return 'badge'; case 'tags': return 'tag'; case 'search': return 'helpCircle'; case 'user-plus': return 'users'; case 'cog': return 'cog'; default: return fa || 'cog'; } } function SectionShell(props: { title?: string; description?: string; icon?: string; children: ReactNode; }) { const { title, description, icon, children } = props; return (
{title ? (

{title}

{description ? (

{description}

) : null}
) : null} {children}
); } const SUB_TABS: Array<{ id: 'discovery'; label: string; icon: string; keys: string[] }> = [ /** Categories → search → reviews reads top-to-bottom like the public catalog flow. */ { id: 'discovery', label: __('Discovery', 'sikshya'), icon: 'tag', keys: ['course_tax', 'course_search', 'course_reviews'] }, ]; export function CourseSettingsTab(props: Props) { const { tabSchema, renderField } = props; const [sub] = useState<(typeof SUB_TABS)[number]['id']>('discovery'); const byKey = useMemo(() => { const map = new Map(); for (const sec of tabSchema) { const k = sec.section_key; if (k) { map.set(k, sec); } } return map; }, [tabSchema]); const fieldsOf = (key: string) => byKey.get(key)?.fields ?? []; const activeKeys = SUB_TABS.find((t) => t.id === sub)?.keys ?? []; return (

{__( 'Layout of the course catalog and single course pages, plus reviews, categories, and search. Enrollment rules, buttons, and completion are under Enrollment in the sidebar.', 'sikshya' )}

{/* Only one Courses sub-tab is currently supported; keep the UI simple. */}
{activeKeys.map((sectionKey) => { const sec = byKey.get(sectionKey); const fields = fieldsOf(sectionKey); if (!fields.length) { return null; } return (
{fields.map(renderField)}
); })}
); }