'use no memo'; // generated cache cost outweighs reuse in these shallow renderers

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

import { clsx } from 'clsx';

import * as css from './FAB.css';

export interface FABProps extends ComponentPropsWithRef<'button'> {
	/** Glyph centered in the button; sized and tinted by the button itself. */
	icon: ComponentType<SVGProps<SVGSVGElement>>;
	/** Accessible name; becomes the `aria-label`. */
	label: string;
}

/**
 * Floating compose button, fixed to the bottom-right on narrow viewports and hidden on wider ones. Forwards
 * arbitrary button props and its ref so it can back a `Dialog.Trigger`.
 */
export function FAB({ className, icon: Icon, label, ...props }: FABProps) {
	return (
		<button aria-label={label} className={clsx(css.fab, className)} type="button" {...props}>
			<Icon className={css.fabIcon} />
		</button>
	);
}