import {StyleSheet} from 'react-native';
import {CONVERSATION_ITEM_HEIGHT} from '@modules/chats/constants';
import {BORDER_RADIUS, SPACING} from '@shared/theme';
import {windowDimensions} from '@shared/constants';

export const styles = StyleSheet.create({
  listContainer: {
    borderRadius: BORDER_RADIUS.l,
    borderWidth: 1,
    padding: SPACING.x2,
  },
  membersContainer: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  addMemberButtonContainer: {
    alignItems: 'center',
    borderWidth: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    paddingHorizontal: SPACING.x2,
    paddingVertical: SPACING.x1,
  },
  addText: {marginRight: SPACING['x0.5']},
  moreUsersContainer: {
    alignItems: 'center',
    flexDirection: 'row',
    height: CONVERSATION_ITEM_HEIGHT - SPACING.x2,
    justifyContent: 'space-between',
  },
  errorSkeletonContainer: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
  },
  skeletonContainer: {
    borderRadius: BORDER_RADIUS.l,
    borderWidth: 1,
    marginTop: SPACING.x2,
    padding: SPACING.x2,
    width: windowDimensions.width - SPACING.x4,
  },
  skeletonListContainer: {paddingHorizontal: 0},
});
