import type {
  RefAttributes,
  ReactNode,
  ElementType,
  CSSProperties,
} from "react";
import classNames from "classnames/dedupe";
import type { DOMProps } from "../../types/dom";
import type { SizeType } from "../../types";
import { sizeClasses } from "../../utils";
import "./Container.css";

export type ContainerElementType = HTMLElement;

export interface ContainerProps
  extends DOMProps, RefAttributes<ContainerElementType> {
  id?: string;
  /** Custom class name for setting specific CSS */
  className?: string;
  /** HTML element for the Box */
  elementType?: ElementType;
  size?: SizeType;
  children?: ReactNode;
  style?: CSSProperties;
}

const Container = ({ ref, ...props }: ContainerProps) => {
  const { elementType: Element = "div", size = "md", ...otherProps } = props;

  const classes = classNames(
    "mobius",
    "mobius-container",
    sizeClasses(size),
    otherProps.className,
  );

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

Container.displayName = "Container";
export { Container };
