import { forwardRef } from "react";
import {
  alignContent,
  justifyContent,
  flexWrap,
  flexDirection,
  alignItems,
} from "../../utils/css-values";
import { styled } from "../../theme";
import type { WithTestId } from "../../types";

const StyledFlex = styled("div", {
  display: "flex",

  variants: {
    direction: { ...flexDirection },
    align: { ...alignItems },
    alignContent: { ...alignContent },
    justify: { ...justifyContent },
    wrap: { ...flexWrap },
    gap: {
      1: {
        gap: "$1",
      },
      2: {
        gap: "$2",
      },
      3: {
        gap: "$3",
      },
      4: {
        gap: "$4",
      },
      5: {
        gap: "$5",
      },
      6: {
        gap: "$6",
      },
      7: {
        gap: "$7",
      },
      8: {
        gap: "$8",
      },
      9: {
        gap: "$9",
      },
      10: {
        gap: "$10",
      },
    },
  },
});

export const Flex = forwardRef<HTMLDivElement, WithTestId<React.ComponentProps<typeof StyledFlex>>>(
  (props, ref) => {
    return <StyledFlex ref={ref} {...props} />;
  }
);

Flex.displayName = "Flex";

export default Flex;