import { ReactNode } from 'react';
import { Text, TouchableOpacity } from 'react-native';

type CustomTextProps = {
  fontSize?: number;
  fontWeight?:
    | 'normal'
    | 'bold'
    | '100'
    | '200'
    | '300'
    | '400'
    | '500'
    | '600'
    | '700'
    | '800'
    | '900';
  padding?: number;
  paddingLeft?: number;
  paddingRight?: number;
  paddingTop?: number;
  paddingBottom?: number;
  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify';
  children: ReactNode;
  lineHeight?: number;
  color?: string;
  opacity?: number;
  textTransform?: 'capitalize' | 'lowercase' | 'uppercase' | 'none';
  onPress?: () => void;
};

export const CustomText = ({
  fontSize = 16,
  fontWeight = '400',
  padding = 0,
  paddingLeft = 0,
  paddingRight = 0,
  paddingBottom = 0,
  paddingTop = 0,
  textAlign,
  lineHeight,
  children,
  color = '#425466',
  opacity = 1,
  onPress,
  textTransform,
}: CustomTextProps) => {
  const textStyles = {
    fontFamily:
      fontWeight === '500'
        ? 'Gordita-Medium'
        : fontWeight === '600'
        ? 'Gordita-Bold'
        : 'Gordita-Regular',
    fontSize: fontSize,
    fontWeight,
    padding,
    paddingLeft,
    paddingRight,
    paddingBottom,
    paddingTop,
    textAlign,
    lineHeight: lineHeight || fontSize * 1.4,
    ...(color && { color }),
    opacity,
    textTransform,
  };

  if (onPress) {
    return (
      <TouchableOpacity onPress={onPress} activeOpacity={0.8}>
        <Text style={textStyles}>{children}</Text>
      </TouchableOpacity>
    );
  }

  return <Text style={textStyles}>{children}</Text>;
};