import React from 'react';
import {StyleProp, Text, TextStyle, ViewStyle} from 'react-native';
import {ColorScheme} from './Design';

export default function EText(props: {
  children: React.ReactNode;
  style?: StyleProp<TextStyle>;
}) {
  return (
    <Text
      style={[
        {
          fontFamily: 'Pretendard-Regular',
          fontSize: 15,
          color: ColorScheme.fill[10],
        },
        props.style,
      ]}>
      {props.children}
    </Text>
  );
}

export function ETitleText(props: {
  children: React.ReactNode;
  style?: StyleProp<TextStyle>;
}) {
  return (
    <Text
      style={[
        {
          fontFamily: 'Pretendard-SemiBold',
          fontSize: 24,
          color: ColorScheme.fill[10],
        },
        props.style,
      ]}>
      {props.children}
    </Text>
  );
}

export function ELabelText(props: {
  children: React.ReactNode;
  style?: StyleProp<TextStyle>;
}) {
  return (
    <Text
      style={[
        {fontFamily: 'Pretendard-SemiBold', fontSize: 15, color: 'white'},
        props.style,
      ]}>
      {props.children}
    </Text>
  );
}

export function ECaptionText(props: {
  children: React.ReactNode;
  error?: boolean;
  style?: StyleProp<TextStyle>;
}) {
  return (
    <Text
      style={[
        {
          fontFamily: 'Pretendard-Regular',
          fontSize: 12,
          color: props.error ? ColorScheme.critical.text : ColorScheme.fill[20],
        },
        props.style,
      ]}>
      {props.children}
    </Text>
  );
}