text: import React from "react";
  import styled, { useTheme } from "styled-components";
  
  const sizeVariant = {
    sm: 1,
    md: 2,
    lg: 3,
    xl: 4,
    xxl: 5,
  };
  
  const positionVariant = {
    top: "marginTop",
    left: "marginLeft",
    right: "marginRight",
    bottom: "marginBottom",
  };
  
  const getVariant = (position, size, theme) => {
    const sizeIndex = sizeVariant[size];
    const property = positionVariant[position];
    const value = theme.space[sizeIndex];
  
    return `${property}:${value}`;
  };
  
  const SpacerView = styled.View`
    ${({ variant }) => variant}
  `;
  
  export const Spacer = ({ position, size, children }) => {
    const theme = useTheme();
    const variant = getVariant(position, size, theme);
    return <SpacerView variant={variant}>{children}</SpacerView>;
  };
  
  Spacer.defaultProps = {
    position: "top",
    size: "small",
  };
  