import { StyleSheet } from 'react-native';
import { Colors } from 'src/theme';
import { getFontSize } from 'src/utils';

export const styles = StyleSheet.create({
  title: { color: Colors.DARK_BLUE, fontFamily: 'redhat-700', fontSize: getFontSize(14) },
  header: {
    alignItems: 'center',
    paddingVertical: 16,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginLeft: '5%',
    marginRight: '5%'
  },
  chatItem: {
    flexDirection: 'row',
    paddingVertical: 12,
    backgroundColor: Colors.WHITE,
    borderBottomWidth: 1,
    borderBottomColor: Colors.FILL_LIGHT,
    gap: 8,
    paddingHorizontal: '4%'
  },
  avatar: {
    width: 54,
    height: 54,
    borderRadius: 27,
    borderWidth: 1,
    borderColor: Colors.FILL_LIGHT
  },
  rowContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  chatName: {
    flex: 1,
    fontFamily: 'montserrat-700',
    fontSize: getFontSize(14),
    color: Colors.DARK_BLUE
  },
  chatMessage: {
    flex: 1,
    fontSize: getFontSize(12),
    fontWeight: '600',
    color: Colors.DARK_BLUE,
    height: '100%'
  },
  chatTimeContainer: {
    justifyContent: 'center',
    alignItems: 'flex-end'
  },
  chatTime: {
    fontSize: getFontSize(12),
    fontWeight: '600',
    color: Colors.LIGHT_GRAY
  },
  unreadBadge: {
    backgroundColor: Colors.ORANGE,
    borderRadius: 9,
    paddingHorizontal: 6,
    alignItems: 'center',
    justifyContent: 'center',
    height: 18,
    minWidth: 18
  },
  unreadText: {
    color: Colors.WHITE,
    fontSize: getFontSize(11),
    fontFamily: 'montserrat-700'
  },
  swipeActions: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  swipeButton: {
    paddingHorizontal: 20
  },
  typingText: {
    flex: 1,
    fontSize: getFontSize(12),
    color: Colors.LIGHT_GRAY,
    fontStyle: 'italic',
    height: '100%'
  },
});
