Pills & Chips

// screens/Home/styles.js
tripModePill: {
  height: 36,
  paddingHorizontal: 16,
  borderRadius: 999,
  justifyContent: 'center',
  alignItems: 'center',
},
tripModePillActive: {
  backgroundColor: 'rgba(68, 148, 252, 0.2)',
},
tripModeText: {
  fontSize: 14,
  color: 'rgba(255, 255, 255, 0.3)',
  fontFamily: Semibold,
  textAlign: 'center',
},
tripModeTextActive: {
  color: colors.white,
},

// Uso:
<Pressable
  style={[
    styles.tripModePill,
    isActive && styles.tripModePillActive,
  ]}
  onPress={() => setTripMode(mode)}
>
  <Text style={[styles.tripModeText, isActive && styles.tripModeTextActive]}>
    {label}
  </Text>
</Pressable>

// screens/Home/styles.js
serviceSelectorButton: {
  width: 48,
  height: 48,
  borderRadius: 12,
  backgroundColor: 'rgba(255,255,255,0.12)',
  borderWidth: 1,
  borderColor: 'rgba(255,255,255,0.08)',
  alignItems: 'center',
  justifyContent: 'center',
},
serviceSelectorButtonActive: {
  backgroundColor: colors.embarko_blue,
  borderColor: 'transparent',
},
serviceSelectorButtonDisabled: {
  opacity: 0.45,
},
serviceSelectorLabel: {
  marginTop: 10,
  fontSize: 14,
  color: colors.white80,
  fontFamily: Medium,
  textAlign: 'center',
},
serviceSelectorLabelActive: {
  color: colors.white,
  fontFamily: Semibold,
},
serviceSelectorLabelDisabled: {
  color: 'rgba(255,255,255,0.40)',
},

// Uso:
const SERVICES = [
  { key: 'passagens', label: 'Passagens', icon: 'flight' },
  { key: 'passeios',  label: 'Passeios',  icon: 'explore' },
  { key: 'shows',     label: 'Shows',     icon: 'music_note' },
  { key: 'esim',      label: 'eSIM',      icon: 'sim_card' },
];

{SERVICES.map((svc) => {
  const isActive   = activeService === svc.key;
  const isDisabled = disabledServices.includes(svc.key);
  return (
    <Pressable
      key={svc.key}
      style={[
        styles.serviceSelectorButton,
        isActive   && styles.serviceSelectorButtonActive,
        isDisabled && styles.serviceSelectorButtonDisabled,
      ]}
      onPress={() => !isDisabled && setActiveService(svc.key)}
    >
      <MaterialIcons name={svc.icon} size={22} color={colors.white} />
      <Text style={[
        styles.serviceSelectorLabel,
        isActive   && styles.serviceSelectorLabelActive,
        isDisabled && styles.serviceSelectorLabelDisabled,
      ]}>
        {svc.label}
      </Text>
    </Pressable>
  );
})}

// Rastreador — date chip
const DATE_CHIPS = ['Ontem', 'Hoje', 'Amanhã'];

{DATE_CHIPS.map((chip) => {
  const isActive = selectedDate === chip;
  return (
    <Pressable
      key={chip}
      style={[
        styles.dateChip,
        isActive && styles.dateChipActive,
      ]}
      onPress={() => setSelectedDate(chip)}
    >
      <Text style={[styles.dateChipText, isActive && styles.dateChipTextActive]}>
        {chip}
      </Text>
    </Pressable>
  );
})}

// StyleSheet:
dateChip: {
  height: inputHeight,        // 54
  borderRadius: radius.sm,    // 8
  borderWidth: 1,
  backgroundColor: colors.white10,
  borderColor: colors.white10,
  paddingHorizontal: 20,
  justifyContent: 'center',
  alignItems: 'center',
},
dateChipActive: {
  backgroundColor: 'rgba(68,148,252,0.2)',
  borderColor: colors.inputBorderFocused,  // #4494FC
},
dateChipText: {
  fontSize: 16,
  fontFamily: Medium,
  color: colors.white60,
},
dateChipTextActive: {
  fontFamily: Semibold,
  color: colors.white,
},