import {StyleSheet} from 'react-native';
import {CHATS_SPACING} from '@modules/chats/utils';
import {BORDER_RADIUS, SPACING} from '@shared/theme';

const REACTION_SIZE = 40;
export const REACTIONS_HEIGHT = 44;

export const styles = StyleSheet.create({
  menu: {
    flexDirection: 'row',
    position: 'absolute',
    borderRadius: BORDER_RADIUS.l,
    marginRight: CHATS_SPACING.itemHorizontalPadding,
    height: REACTIONS_HEIGHT,
    padding: SPACING['x0.25'],
    gap: SPACING['x0.25'],
    alignItems: 'center',
  },
  menuBorder: {
    borderWidth: 1,
  },
  menuItem: {
    borderRadius: REACTION_SIZE,
    width: REACTION_SIZE,
    height: REACTION_SIZE,
    justifyContent: 'center',
    alignItems: 'center',
  },
  emoji: {
    fontSize: 24,
    lineHeight: 28,
  },
  more: {
    width: 24,
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 12,
    marginRight: 8,
  },
});
