import React from "react";
import { theme } from "../../../css/globalStyle";

interface Props extends React.HTMLAttributes<HTMLDivElement> {
  children: JSX.Element | any[];
  justify?:
    | "flex-start"
    | "flex-end"
    | "center"
    | "space-between"
    | "space-around"
    | "space-evenly"
    | "initial"
    | "inherit";
  align?:
    | "stretch"
    | "center"
    | "flex-start"
    | "flex-end"
    | "baseline"
    | "initial"
    | "inherit";
  direction?:
    | "row"
    | "row-reverse"
    | "column"
    | "column-reverse"
    | "initial"
    | "inherit";
  basis?: number | "auto" | "initial" | "inherit";
  grow?: number | "initial" | "inherit";
  shrink?: number | "initial" | "inherit";
  wrap?: "nowrap" | "wrap" | "wrap-reverse" | "initial" | "inherit";
  gap?: number | string;
}

// Component used to wrap elements to make it quicker to create flexboxes

export const Flex = ({
  children,
  justify,
  align,
  direction,
  basis,
  grow,
  shrink,
  wrap,
  gap,
  ...rest
}: Props) => {
  const styles = {
    width: "100%",
    display: "flex",
    justifyContent: justify,
    alignItems: align,
    flexDirection: direction,
    flexBasis: basis,
    flexGrow: grow,
    flexShrink: shrink,
    flexWrap: wrap,
    gap: typeof gap === "number" ? theme.spacing[gap] : gap
  };
  return (
    <div style={styles} {...rest}>
      {children}
    </div>
  );
};
