import { Flex, Skeleton } from "@mantine/core";

interface MessageSkeletonProps {
    messageHeight: number;
}

export function MessageSkeleton(props : MessageSkeletonProps) {
    return (
        <>
            <Flex p={'sm'}>
                <Skeleton width={40} height={40} radius="xl" />
                <Flex direction="column" ml="sm" style={{flex: 1}}>
                    <Skeleton width={'30%'} height={10} mb={5} />
                    <Skeleton width={'80%'} height={props.messageHeight} />
                </Flex>
            </Flex>
        </>
    )
}