import {StyleSheet} from 'react-native';
import {TYPOGRAPHY_STYLES} from '@components';
import {ICON_SIZES, SPACING} from '@shared/theme';

// Inline View children in <Text> have their bottom anchored to the text
// baseline, which leaves the icon sitting visually above the first-line
// center. We push it down by the half-leading so the icon's vertical center
// matches the first-line glyph center. verticalAlign would be cleaner but is
// Android-only in RN, so we keep translateY and derive its value.
const ICON_INLINE_OFFSET =
  (TYPOGRAPHY_STYLES.xs.lineHeight - ICON_SIZES.x4) / 2;

export const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: SPACING['x0.25'],
  },
  icon: {transform: [{translateY: ICON_INLINE_OFFSET}]},
});
