import type { ReactNode } from 'react';

import type { AppBskyEmbedRecord } from '@atcute/bluesky';
import type { $type } from '@atcute/lexicons';

import { clsx } from 'clsx';

import { Embed, PostEmbedViewContext } from '#/components/Post/Embed';

import { MessageContextProvider } from './MessageContext';
import * as css from './MessageItemEmbed.css';

function MessageItemEmbed({
	embed,
	isFromSelf,
	squaredTopCorner,
	squaredBottomCorner,
}: {
	embed: $type.enforce<AppBskyEmbedRecord.View>;
	isFromSelf: boolean;
	squaredTopCorner: boolean;
	squaredBottomCorner: boolean;
}): ReactNode {
	return (
		<MessageContextProvider>
			<div className={css.outer}>
				<div
					className={clsx(
						css.inner({ fromSelf: isFromSelf }),
						css.bubbleCorners({
							fromSelf: isFromSelf,
							squaredBottom: squaredBottomCorner,
							squaredTop: squaredTopCorner,
						}),
					)}
				>
					<Embed allowNestedQuotes embed={embed} viewContext={PostEmbedViewContext.ChatMessage} />
				</div>
			</div>
		</MessageContextProvider>
	);
}
export { MessageItemEmbed };