import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx";
import { forwardRef } from "react";


const MessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
	className,
	outline = "sm",
	rounded = "lg",
	...messageProps
}, ref ) => {
	return (
		<div
			data-testid="mattrixwv-message-block"
			className={clsx(
				className,
				"px-4 py-2",
				{
					"border-0": outline === "none",
					"border": outline === "sm",
					"border-2": outline === "md",
					"border-3": outline === "lg"
				},
				{
					"rounded-none": rounded === "none",
					"rounded-xs": rounded === "xs",
					"rounded-sm": rounded === "sm",
					"rounded-md": rounded === "md",
					"rounded-lg": rounded === "lg",
					"rounded-xl": rounded === "xl"
				}
			)}
			ref={ref}
			{...messageProps}
		/>
	);
});

MessageBlock.displayName = "MessageBlock";

export default MessageBlock;