import React from 'react'
import { Platform, StyleSheet, View } from 'react-native'
import { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'
import { useTheme } from '../../app/contexts/ThemeContext'

function generateBoxShadowStyle(
  xOffset: number,
  yOffset: number,
  shadowColorIos: string,
  shadowOpacity: number,
  shadowRadius: number,
  elevation: number,
  shadowColorAndroid: string
):void {
  if(Platform.OS === 'ios'){
    styles.boxShadow = {
      shadowColor: shadowColorIos,
      shadowOffset : {width: xOffset, height: yOffset},
      shadowOpacity,
      shadowRadius,
      backgroundColor: useTheme().colors.backgroundColor
    }
  }else if (Platform.OS === 'android'){
    styles.boxShadow = {
      elevation: elevation,
      shadowColor: shadowColorAndroid,
    };
  }
}

export default function CustomCard(props : ViewProps) {
  generateBoxShadowStyle(1, 1, '#171717', 0.2, 20, 10, '#171717')
  return (
    <View style={[styles.container, styles.boxShadow, props.style]}>
      {props.children}
    </View>
  )
}

const styles = StyleSheet.create({
  container:{
    flexDirection: "row",
    alignItems: "stretch",
    alignContent: "space-between",
    borderRadius: 10,
    marginHorizontal: 10,
  },
  boxShadow: {},
})