import * as stylex from "@stylexjs/stylex";
import { type PropsWithChildren, memo } from "react";

import { size } from "./tokens.stylex";

export interface ButtonGroupProps extends PropsWithChildren {
	centered?: boolean;
}

const styles = stylex.create({
	group: {
		display: "flex",
		flexDirection: "row",
		alignItems: "center",
		gap: size.px2,
	},
	centered: {
		justifyContent: "center",
	},
});

export default memo(function ButtonGroup({
	centered,
	children,
}: ButtonGroupProps) {
	return (
		<div {...stylex.props(styles.group, centered && styles.centered)}>
			{children}
		</div>
	);
});