// @flow
/* eslint-disable jsx-a11y/mouse-events-have-key-events */
import React from 'react';
import { StyleSheet, View } from 'react-native';
import Typography from '../Typography/Typography';
import { border, colors } from '../Utils/Theme';
import styles from './TextFieldLabel.styles';

type Props = {
  isFocused: boolean,
  isRaised: boolean,
  text: string,
};

const TextFieldLabel = ({ isFocused, isRaised, text }: Props) => {
  const color = isFocused ? colors.primary : border.color;
  const size = isRaised ? 10 : null;
  const style = StyleSheet.flatten([
    styles.label,
    isRaised && styles.raised,
  ]);
  return (
    <View style={style}>
      <Typography text={text} color={color} size={size} />
    </View>
  );
};

TextFieldLabel.defaultProps = {
  isFocused: false,
  isRaised: false,
  text: '',
};

export default TextFieldLabel;
