// @flow
import React from 'react';
import type { Node } from 'react';
import { StyleSheet, View } from 'react-native';
import styles from './Elevation.styles';

type Props = {
  borderRadius: number,
  children: Node,
  level: number,
};

const Elevation = ({ borderRadius, children, level }: Props) => {
  const elevationStyles = StyleSheet.flatten([
    styles.transition,
    styles[`shadow--${level}`],
    { backgroundColor: 'rgba(255, 255, 255, 1)' },
    borderRadius && { borderRadius },
  ]);
  return <View style={elevationStyles}>{children}</View>;
};

Elevation.defaultProps = {
  borderRadius: 0,
  level: 0,
};

export default Elevation;
