import React from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import { View, Text, StyleSheet } from 'react-native';
import {
  responsiveFontSize,
  responsiveWidth,
  responsiveHeight,
} from 'react-native-responsive-dimensions';
import { colors } from '../../theme/colors';

interface WelcomeCheckProps {
  text: string;
}

const WelcomeCheck = (props: WelcomeCheckProps) => {
  return (
    <View style={styles.content}>
      <Icon name="checkmark-circle-outline" size={responsiveFontSize(3.5)} color={colors.green} />
      <Text style={styles.text}>{props.text}</Text>
    </View>
  );
};
interface WelcomeChecksProps {
  children: React.ReactNode;
}

const WelcomeChecks = (props: WelcomeChecksProps) => (
  <View style={styles.container}>{props.children}</View>
);

const styles = StyleSheet.create({
  container: {
    justifyContent: 'space-evenly',
    width: responsiveWidth(70),
    height: responsiveHeight(30),
  },

  content: {
    flexDirection: 'row',
    alignItems: 'center',
  },

  text: {
    flex: 1,
    marginLeft: responsiveFontSize(1),
    fontSize: responsiveFontSize(1.8),
    fontFamily: 'Lato-Regular',
  },
});

export { WelcomeCheck, WelcomeChecks };