import { AntDesign } from '@expo/vector-icons'
import React from 'react'
import { StyleSheet, TouchableOpacity, ViewProps } from 'react-native'
import { useThemeColor } from '../../../hooks/useThemeColor'

type PlusProps = ViewProps & {onPress? : ()=> void | undefined}

const Plus = (props : PlusProps) => {
  const accentColor = useThemeColor("accentColor");
  const primaryText = useThemeColor("primaryText");

  const style = StyleSheet.create({
    plus:{
      position: "absolute",
      right: 20,
      bottom: 20,
      zIndex: 1,
      backgroundColor: accentColor,
      padding: 20,
      borderRadius: 500,
      height: 60,
      width: 60,
      alignItems: 'center',
      justifyContent: "center",
      flex:1
    }
}); 
return (

      <TouchableOpacity onPress={props.onPress} style={[style.plus, props.style]}>
      {props.children}
      
        <AntDesign name='plus' color={primaryText} size={20}></AntDesign>
      </TouchableOpacity>

  );
};

export default Plus;