import { Text as RNText, TextProps as RNTextProps, StyleProp, View, ViewStyle } from 'react-native';
import { useTheme } from '../../core';
import { tw } from '../../core/tailwind';

type TextProps = RNTextProps & {
  // Applies styles that make the text look like a "primary" or "important" title.
  isHeader?: boolean;
  // Includes a left border with the primary color.
  leftBorder?: boolean;
  icon?: React.ReactNode;
  containerStyle?: StyleProp<ViewStyle>;
};

export function Text(props: TextProps) {
  const { primary, font } = useTheme();
  const { style, leftBorder, isHeader, icon, containerStyle, ...otherProps } = props;

  return (
    <View
      style={[
        tw`flex-row justify-start items-center`,
        leftBorder ? tw.style({ borderLeftWidth: 3, borderLeftColor: primary }, 'pl-2') : undefined,
        containerStyle,
      ]}
    >
      <View style={icon ? tw`mr-1` : undefined}>{icon}</View>
      <RNText
        style={[
          tw`text-[#F2F2F2] dark:text-black`,
          isHeader ? tw`text-lg font-bold` : undefined,
          { fontFamily: font },
          style,
        ]}
        {...otherProps}
      />
    </View>
  );
}