import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { StackProps } from "./Stack";

const StyledStack = styled.div<StackProps>`
  display: flex;
  ${({ direction, rowSpacing, columnSpacing, wrap }) => {
    return css`
      flex-direction: ${direction};
      grid-gap: ${rowSpacing}rem ${columnSpacing}rem;
      flex-wrap: ${wrap ? "wrap" : "no-wrap"};
    `;
  }}
`;

export default StyledStack;