"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const native_1 = require("@platformbuilders/helpers/native");
const styles_1 = require("./styles");
const BottomNavigation = ({ fields, currentRoute, activeFieldColor, }) => {
    const { bottomSpacing } = (0, native_1.useSpacingsWithSafeArea)();
    const renderFields = (0, react_1.useCallback)(() => fields.map((navField) => (<styles_1.NavField key={navField.routeName} accessibility={`Ir para ${navField.label}`} onPress={navField.onPress} id={navField.routeName}>
          <styles_1.NavIcon accessibility={navField.iconName} name={navField.iconName} active={navField.routeName === currentRoute} activeColor={activeFieldColor} id={`Icon${navField.routeName}`}/>

          <styles_1.NavLabel active={navField.routeName === currentRoute} activeColor={activeFieldColor} id={`Label${navField.routeName}`}>
            {navField.label}
          </styles_1.NavLabel>
        </styles_1.NavField>)), [fields, currentRoute]);
    return (<styles_1.BottomNavigationWrapper bottomSpacing={bottomSpacing}>
      {renderFields()}
    </styles_1.BottomNavigationWrapper>);
};
exports.default = BottomNavigation;
//# sourceMappingURL=index.js.map