import {StyleSheet} from 'react-native';
import {COLORS} from '@shared/colors';
import {isAndroid} from '@shared/utils';
import {BORDER_RADIUS, SPACING} from '@shared/theme';

const BUBBLE_SIZE = 20;

export const styles = StyleSheet.create({
  container: {
    backgroundColor: COLORS.WHITE,
    flex: 1,
    paddingHorizontal: SPACING.x2,
  },
  content: {
    gap: SPACING.x1,
    paddingTop: SPACING.x3,
  },
  searchInputContainer: {
    alignItems: 'center',
    flexDirection: 'row',
  },
  searchInput: {
    backgroundColor: COLORS.WHITE,
    borderColor: COLORS.GRAY_THIRTY_FOUR,
    borderRadius: BORDER_RADIUS.m,
    borderWidth: 1,
    flexShrink: 1,
    marginHorizontal: 0,
    ...(isAndroid && {paddingVertical: SPACING['x0.5']}),
  },
  iconContainer: {marginHorizontal: SPACING['x1.5']},
  bubbleContainer: {
    alignItems: 'center',
    backgroundColor: COLORS.LIGHT_BLUE_TWELVE,
    borderRadius: BUBBLE_SIZE,
    bottom: SPACING['x1.5'],
    height: BUBBLE_SIZE,
    justifyContent: 'center',
    left: 14,
    position: 'absolute',
    width: BUBBLE_SIZE,
    zIndex: 1,
  },
  emptyList: {padding: SPACING['x1.5']},
});
