'use no memo'; // forwarded props invalidate the generated wrapper cache

import type { ComponentType, SVGProps } from 'react';

import { clsx } from 'clsx';

import { Button, type ButtonProps } from '#/components/web/Button';

import * as styles from './ComposerToolbarButton.css';

/**
 * a composer-toolbar icon button.
 *
 * @param icon the icon to render inside the button
 */
export function ComposerToolbarButton({
	icon: Icon,
	className,
	...props
}: Omit<ButtonProps, 'children' | 'color' | 'shape' | 'size' | 'variant'> & {
	icon: ComponentType<SVGProps<SVGSVGElement>>;
}) {
	return (
		<Button variant="ghost" className={clsx(styles.button, className)} {...props}>
			<Icon className={styles.icon} />
		</Button>
	);
}