import type { ReactNode } from "react";
import classNames from "classnames/dedupe";
import type { DOMProps } from "../../types/dom";

export interface SegmentGroupProps extends DOMProps {
  className?: string;
  horizontal?: boolean;
  gap?: "size-xs" | "size-s" | "size-m" | "size-l" | "size-xl" | "size-xxl";
  children?: ReactNode;
}

const SegmentGroup = (props: SegmentGroupProps) => {
  const { children, horizontal, gap, className, ...rest } = props;

  const gapClass = gap ? `gap-${gap}` : "";
  const classes = classNames(
    "mobius",
    "mobius-segment-group",
    className,
    { "--is-horizontal": horizontal },
    gapClass,
  );

  return (
    <div className={classes} {...rest}>
      {children}
    </div>
  );
};

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