import React from 'react';
import {View, Text, Dimensions, StyleSheet} from 'react-native';
import {Icon} from 'components';
import {Colors, FONTS} from 'global-styles';
import {RFValue} from 'react-native-responsive-fontsize';
const {width} = Dimensions.get('window');

const Note = props => {
  const {message} = props;
  return (
    <View style={styles.container}>
      <Icon name="info" type="Feather" style={styles.icon} />
      <View style={styles.messageSection}>
        <Text style={styles.message}>{message}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.BLUE,
    paddingVertical: width * 0.03,
    paddingHorizontal: width * 0.04,
    borderRadius: width * 0.02,
    flexDirection: 'row',
    alignItems: 'flex-start',
    minHeight: width * 0.17,
  },
  messageSection: {
    paddingLeft: width * 0.02,
    marginRight: width * 0.02,
    marginTop: -width * 0.004,
  },
  message: {
    fontFamily: FONTS.poppins[400],
    fontSize: RFValue(11.5),
    color: Colors.WHITE,
  },
  icon: {
    fontSize: RFValue(14),
    color: Colors.WHITE,
  },
});

export default Note;
