RocketChat/Rocket.Chat

import { Box, Bubble } from '@rocket.chat/fuselage';
import type { Ref } from 'react';
import React, { forwardRef } from 'react';

import { useFormatDate } from '../../../hooks/useFormatDate';
import type { BubbleDateProps } from '../hooks/useDateScroll';

export const BubbleDate = forwardRef(function BubbleDate(
    { bubbleDate, showBubble, bubbleDateStyle, bubbleDateClassName }: BubbleDateProps,
    ref: Ref<HTMLElement>,
) {
    const formatDate = useFormatDate();
    return (
        <Box ref={ref} position='relative' display='flex' justifyContent='center'>
            <Box className={[bubbleDateClassName, showBubble && 'bubble-visible']} style={bubbleDateStyle}>
                {bubbleDate && (
                    <Bubble small secondary>
                        {formatDate(bubbleDate)}
                    </Bubble>
                )}
            </Box>
        </Box>
    );
});