import { StyleSheet, Text, type TextProps } from 'react-native';
import { fonts, m3Colors, spacing } from '../theme/proulr-theme';

type HintTextProps = TextProps & {
  spaced?: boolean;
};

export function HintText({ spaced, style, ...props }: HintTextProps) {
  return <Text style={[styles.hint, spaced && styles.spaced, style]} {...props} />;
}

const styles = StyleSheet.create({
  hint: {
    color: m3Colors.onSurfaceVariant,
    fontSize: 12,
    lineHeight: 17,
    fontFamily: fonts.regular,
  },
  spaced: {
    marginTop: spacing.sm,
  },
});