frontend/src/components/common/Text.tsx

/**
 * Text 文本组件
 * 提供统一的文本样式
 */

import React from 'react';
import { Text as RNText, TextProps, StyleSheet, TextStyle, ViewStyle } from 'react-native';
import { colors, fontSizes } from '../../theme';

type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label';

interface CustomTextProps extends Omit<TextProps, 'style'> {
  children: React.ReactNode;
  variant?: TextVariant;
  color?: string;
  numberOfLines?: number;
  onPress?: () => void;
  style?: TextStyle | TextStyle[];
}

const variantStyles: Record<TextVariant, object> = {
  h1: {
    fontSize: fontSizes['4xl'],
    fontWeight: '700',
    lineHeight: fontSizes['4xl'] * 1.4,
  },
  h2: {
    fontSize: fontSizes['3xl'],
    fontWeight: '600',
    lineHeight: fontSizes['3xl'] * 1.4,
  },
  h3: {
    fontSize: fontSizes['2xl'],
    fontWeight: '600',
    lineHeight: fontSizes['2xl'] * 1.3,
  },
  body: {
    fontSize: fontSizes.md,
    fontWeight: '400',
    lineHeight: fontSizes.md * 1.5,
  },
  caption: {
    fontSize: fontSizes.sm,
    fontWeight: '400',
    lineHeight: fontSizes.sm * 1.4,
  },
  label: {
    fontSize: fontSizes.xs,
    fontWeight: '500',
    lineHeight: fontSizes.xs * 1.4,
  },
};

const Text: React.FC<CustomTextProps> = ({
  children,
  variant = 'body',
  color,
  numberOfLines,
  onPress,
  style,
  ...props
}) => {
  const textStyle = [
    styles.base,
    variantStyles[variant],
    color ? { color } : { color: colors.text.primary },
    style,
  ];

  if (onPress) {
    return (
      <RNText
        style={textStyle}
        numberOfLines={numberOfLines}
        onPress={onPress}
        {...props}
      >
        {children}
      </RNText>
    );
  }

  return (
    <RNText style={textStyle} numberOfLines={numberOfLines} {...props}>
      {children}
    </RNText>
  );
};

const styles = StyleSheet.create({
  base: {
    fontFamily: undefined, // 使用系统默认字体
  },
});

export default Text;