"use strict";

import React, { useContext } from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { ApplicationContext } from "../Context/index.js";
import { Icon } from "../Icon/index.js";
import { SizedBox } from "../SizedBox/index.js";
import { Spacing, Styles } from "../Consts/index.js";
import { Text } from "../Text/index.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const TabItem = ({
  label,
  icon,
  active,
  direction = 'column',
  onPress
}) => {
  const {
    theme
  } = useContext(ApplicationContext);
  const typography = active ? 'callout' : 'subhead';
  const color = active ? theme.colors.primary.default : undefined;
  const buildIcon = () => {
    if (icon) {
      return /*#__PURE__*/_jsxs(_Fragment, {
        children: [typeof icon === 'string' ? /*#__PURE__*/_jsx(Icon, {
          name: icon,
          size: 24,
          color: color
        }) : icon, /*#__PURE__*/_jsx(SizedBox, {
          width: Spacing.XS,
          height: Spacing.XS
        })]
      });
    }
    return null;
  };
  return /*#__PURE__*/_jsxs(TouchableOpacity, {
    style: [styles.tabItem, {
      flexDirection: direction
    }],
    onPress: onPress,
    children: [buildIcon(), !!label && /*#__PURE__*/_jsx(Text, {
      style: Styles.textCenter,
      numberOfLines: 1,
      color: color,
      fontWeight: active ? 'semibold' : 'regular',
      typography: typography,
      children: label
    })]
  });
};
const styles = StyleSheet.create({
  tabItem: {
    padding: Spacing.M,
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1
  }
});
export default TabItem;
//# sourceMappingURL=default.js.map