import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { namedTermItems } from '../../terms.js';
import { useTranslation } from '../hooks/index.js';
import { X } from './_X.js';
export const TermsTable = ({ terms }) => {
    const t = useTranslation();
    const normalized = terms ?? namedTermItems;
    const withName = normalized.some(({ name }) => name);
    const renderBadCases = (list) => list?.length ? (_jsx(X.ul, { children: list.map((item, index) => (
        // eslint-disable-next-line @eslint-react/no-array-index-key
        _jsx(X.li, { children: item }, index))) })) : ('-');
    return (_jsxs(X.table, { children: [_jsx("thead", { children: _jsxs(X.tr, { children: [withName && _jsx(X.th, { children: t('name') }), _jsx(X.th, { children: t('chinese') }), _jsx(X.th, { children: t('chinese_bad_cases') }), _jsx(X.th, { children: t('english') }), _jsx(X.th, { children: t('english_bad_cases') }), _jsx(X.th, { children: t('description') })] }) }), _jsx("tbody", { children: normalized.map((term, index) => (_jsxs(X.tr, { children: [withName && _jsx(X.td, { children: term.name || '-' }), _jsx(X.td, { children: term.zh || term.en }), _jsx(X.td, { children: renderBadCases(term.badCases?.zh) }), _jsx(X.td, { children: term.en }), _jsx(X.td, { children: renderBadCases(term.badCases?.en) }), _jsx(X.td, { children: term.description || '-' })] }, term.name || index))) })] }));
};
export default TermsTable;
