import {StyleSheet} from 'react-native';
import {BORDER_RADIUS, COLORS, SPACING} from '@shared/theme';
import {Opacity} from '@shared/constants';

const REACTION_HEIGHT = 32;
const REACTION_WIDTH = 52;
const BORDER_WIDTH = 1.5;

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: SPACING.x1,
    marginTop: SPACING.x1,
  },
  reactionContainer: {
    alignItems: 'center',
    borderColor: COLORS.transparent,
    borderRadius: BORDER_RADIUS.m,
    borderWidth: BORDER_WIDTH,
    flexDirection: 'row',
    gap: SPACING['x0.5'],
    minHeight: REACTION_HEIGHT,
    paddingHorizontal: SPACING.x1,
    paddingVertical: SPACING['x0.5'],
  },
  reactionContainerWidth: {minWidth: REACTION_WIDTH},
  addingMoreIcon: {minHeight: REACTION_HEIGHT},
  disabled: {opacity: Opacity.MEDIUM},
});

export default styles;
