import React from 'react';
import { ViewProps } from 'react-native';

import { useShadowStyle } from '../../../hooks/useShadowStyle';
import { Elevation } from '../../../utils/generateShadow';
import { StyledView, StyledViewProps } from './Box.styles';

export interface BoxProps extends ViewProps, StyledViewProps {
  /**
   * Based on Android elevation (numbers between 0 and 9)
   */
  shadow?: Elevation;
  children?: React.ReactNode;
}

export const Box = ({ style, shadow, children, ...rest }: BoxProps) => {
  const shadowStyle = useShadowStyle(shadow);
  return (
    <StyledView style={[shadowStyle, style]} {...rest}>
      {children}
    </StyledView>
  );
};