import React from 'react';
import cx from 'classnames';
import { BetaBadge } from './betaBadge';
import { MainNavLink } from './mainNavLink';
import { formatTitle } from './utils';
import type { MainNavSectionOptions } from '../../types';

const CLASS_NAME = 'NavSection';

export interface MainNavSectionProps<AppData = unknown> {
    section: MainNavSectionOptions<AppData>;
    loading?: boolean;
}

export function MainNavSection<AppData>({ section }: MainNavSectionProps<AppData>) {
    return (
        <section
            id={`${CLASS_NAME}-${section.id}`}
            className={cx(CLASS_NAME, `${CLASS_NAME}-${section.type}`)}
        >
            {(section.title || section.term) && (
                <div className={`${CLASS_NAME}-header`}>
                    {formatTitle(section)}
                    {section.beta && <BetaBadge />}
                </div>
            )}

            {section.items.map((item) => {
                if (item.Component)
                    return <item.Component key={item.routeId ?? item.path} {...item} />;

                return <MainNavLink key={item.routeId ?? item.path} {...item} />;
            })}
        </section>
    );
}