import {StyleSheet} from 'react-native';
import {SPACING} from '@shared/theme';

export const styles = StyleSheet.create({
  tabsContainer: {
    borderBottomWidth: 1,
    overflow: 'hidden',
  },
  tab: {
    alignContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    gap: SPACING['x0.75'],
    justifyContent: 'center',
    marginRight: SPACING.x2,
    minWidth: SPACING.x5,
    paddingBottom: SPACING.x1,
    paddingTop: SPACING.x1,
    textAlign: 'center',
  },
  selectedTab: {borderBottomWidth: 2},
  userItem: {
    alignItems: 'center',
    flexDirection: 'row',
    paddingBottom: SPACING.x3,
  },
  loadingContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: SPACING.x3,
  },
  userName: {
    flex: 1,
    marginLeft: SPACING.x2,
  },
  emptyList: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: SPACING.x3,
  },
  avatarContainer: {marginRight: SPACING.x1},

  reactionsContainer: {
    minHeight: 150,
    paddingTop: SPACING.x1,
  },
  list: {
    paddingHorizontal: 0,
    paddingTop: SPACING.x2,
  },
  listContainer: {marginBottom: SPACING.x8},
});
