import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useDown, vui } from '../core';
import FooterColumn from './footerColumn';
import FooterRow from './footerRow';
/** Organizes sections with links into a single column. Different width per breakpoint. */
const FooterColumns = vui(props => {
    const { columns } = props;
    const downXs = useDown(460);
    const downMd = useDown('md');
    if (!columns)
        return null;
    if (downXs) {
        return (_jsx(FooterRow, { children: _jsx(FooterColumn, { flex: '1 1 auto', sections: columns.flat(), textAlign: 'center' }, 'evenColumns') }));
    }
    if (downMd) {
        const columnsEven = columns.filter((_, index) => index % 2 === 0).flat();
        const columnsOdd = columns.filter((_, index) => index % 2 === 1).flat();
        return (_jsxs(FooterRow, { children: [_jsx(FooterColumn, { sections: columnsEven }, 'evenColumns'), _jsx(FooterColumn, { sections: columnsOdd }, 'oddColumns')] }));
    }
    return (_jsx(FooterRow, { children: columns.map((sections, index) => (_jsx(FooterColumn, { sections: sections }, index))) }));
});
FooterColumns.displayName = 'Footer Mobile Column';
export default FooterColumns;
//# sourceMappingURL=footerColumns.js.map