<script>
    import { marked } from 'marked';
    import DOMPurify from 'dompurify';

    export let at;
    export let body;

    let renderedBody = DOMPurify.sanitize(marked.parse(body));

    let scroll = (message) => {
        message.scrollIntoView();
    }
</script>

<div class="message relative">
    <span class="timestamp chip variant-soft absolute top-0 right-0">{at}</span>
    <section use:scroll class="py-1">
        {@html renderedBody}
    </section>
</div>

<style>
    .message .timestamp {
        display: none;
    }
    .message:hover .timestamp {
        display: flex;
    }
</style>
