import styled, { css } from "styled-components/macro";

export type IGaps = "none" | "small" | "medium" | "large" | "xlarge" | "huge";

interface FlexProps {
  direction?: React.CSSProperties["flexDirection"];
  justify?: React.CSSProperties["justifyContent"];
  align?: React.CSSProperties["alignItems"];
  nowrap?: boolean;
  gap?: IGaps;
}

export const Flex = styled.div<FlexProps>(
  ({ gap = "none", direction, justify, align, nowrap }) => css`
    display: flex;
    flex-direction: ${direction};
    justify-content: ${justify};
    align-items: ${align};
    flex-wrap: ${nowrap ? "no-wrap" : "wrap"};
    & > *:not(:last-child) {
      ${direction === "column"
        ? css`
            margin-bottom: ${(p) => p.theme.space[gap]}px;
          `
        : css`
            margin-right: ${(p) => p.theme.space[gap]}px;
          `}
    }
  `
);

export default Flex;