import type { Ref, RefAttributes, ReactNode } from "react";
import type React from "react";
import classNames from "classnames/dedupe";
import type { DOMProps } from "../../types/dom";
import type { SpacingType } from "../../types";
import "./Stack.css";

export type StackElementType = HTMLDivElement;

export interface StackProps extends DOMProps, RefAttributes<StackElementType> {
  children?: ReactNode;
  /** How big a gap between items */
  gap?: SpacingType;
  /** Custom class name for setting specific CSS */
  className?: string;
  elementType?: React.ElementType;
}

export type StackRef = Ref<StackElementType>;

export const Stack = ({ ref, ...props }: StackProps) => {
  const { elementType: Element = "div", gap, ...otherProps } = props;

  const classes = classNames(
    "mobius",
    "mobius-stack",
    {
      [`--gap-${gap}`]: gap,
    },
    otherProps.className,
  );

  return <Element ref={ref} {...otherProps} className={classes} />;
};

Stack.displayName = "Stack";
