renderer

// @flow

import React from 'react';
import { View, Text } from 'react-native';
import IconRenderer from './IconRenderer';

import type { TIcon, TColor } from '../type';
import { Size, type TSize, type TSizeLookup } from './size';

export type Props = {
  backgroundColor: TColor,
  color: TColor,
  icon: TIcon,
  label: string,
  size: TSize,
};

export default function TextRenderer(props: Props) {
  const { backgroundColor, color, icon, label, size = Size.M } = props;
  return (
    <View
      style={{
        alignItems: 'center',
        backgroundColor,
        flexDirection: 'row',
        height: LabelHeight[size],
        justifyContent: 'center',
      }}
    >
      <IconRenderer backgroundColor={backgroundColor} color={color} icon={icon} size={size} />
      <Text
        style={{
          paddingLeft: LabelPadding[size],
          color,
          fontSize: LabelFontSize[size],
        }}
      >
        {label}
      </Text>
    </View>
  );
}