import cx from "classnames";
import type { HTMLAttributes, ReactNode } from "react";
import React from "react";

const CLASS_ROOT = "control-group__item";

interface ItemProps extends HTMLAttributes<HTMLDivElement> {
  size?: "default" | "large";
  className?: string;
  children?: ReactNode;
}

const defaultProps = {
  size: "default" as const,
};

const Item: React.FC<ItemProps> = ({
  size = defaultProps.size,
  className,
  children,
  ...other
}) => {
  const classes = cx(CLASS_ROOT, className, {
    [`${CLASS_ROOT}--${size}`]: size !== defaultProps.size,
  });

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

Item.displayName = "GroupItem";

export { Item };