import { forwardRef } from "react";
import type { CSSObject } from "@emotion/react";

export type StackProps = {
  className?: string;
  direction?: "column" | "row";
  spacing?: number;
  alignItems?: CSSObject["alignItems"];
  justifyContent?: CSSObject["justifyContent"];
  wrap?: CSSObject["flexWrap"];
} & React.HTMLProps<HTMLDivElement>;

export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
  const {
    children,
    direction = "column",
    spacing = 2,
    alignItems,
    justifyContent,
    wrap,
    ...divProps
  } = props;

  return (
    <div
      {...divProps}
      ref={ref}
      css={{
        display: "flex",
        flexDirection: direction,
        gap: spacing * 8,
        alignItems: alignItems,
        justifyContent: justifyContent,
        flexWrap: wrap,
        maxWidth: "100%",
      }}
    >
      {children}
    </div>
  );
});