import React from 'react';
import { View } from 'react-native';
import { parseSize, applyStyles } from '../../utils/styles';

interface Props {
  component: any;
  scaleFactor: number;
  parentDirection?: string;
}

export const NamiSpacer: React.FC<Props> = ({ component, scaleFactor, parentDirection }) => {
  const hasExplicitSize = component.height || component.fixedHeight || component.width || component.fixedWidth;
  const height = parseSize(component.height ?? component.fixedHeight ?? component.spacing ?? 8, scaleFactor);
  const width = parseSize(component.width ?? component.fixedWidth, scaleFactor);
  const baseStyle = applyStyles(component, scaleFactor, false, parentDirection);
  const style = {
    ...baseStyle,
    height,
    width,
    ...(hasExplicitSize ? {} : { flexGrow: 1 }),
  };
  return <View style={style} />;
};