RocketChat/Rocket.Chat

import { Box } from '@rocket.chat/fuselage';
import type { ReactElement, ReactNode } from 'react';
import React from 'react';

import AttachmentDownload from './content/attachments/structure/AttachmentDownload';
import AttachmentSize from './content/attachments/structure/AttachmentSize';
import { useCollapse } from './hooks/useCollapse';

type MessageCollapsibleProps = {
    children?: ReactNode;
    title?: string;
    hasDownload?: boolean;
    link?: string;
    size?: number;
    isCollapsed?: boolean;
};

const MessageCollapsible = ({ children, title, hasDownload, link, size, isCollapsed }: MessageCollapsibleProps): ReactElement => {
    const [collapsed, collapse] = useCollapse(isCollapsed);

    return (
        <>
            <Box display='flex' flexDirection='row' color='hint' fontScale='c1' alignItems='center'>
                <Box withTruncatedText title={title}>
                    {title}
                </Box>
                {size && <AttachmentSize size={size} />} {collapse}
                {hasDownload && link && <AttachmentDownload title={title} href={link} />}
            </Box>
            {!collapsed && children}
        </>
    );
};

export default MessageCollapsible;