<script>
    import { currentUser } from '../store';
    import { deleteMessage } from '../apiServer';

    export let at;
    export let sender;
    export let message;

    let timestamp = new Date(at).toTimeString();
</script>

<div class="hover:bg-zinc-300 flex flex-row">
    <div class="sender basis-20 text-right mr-1">
        @{sender.name}:
    </div>
    <div class="body grow">
        {message.body}
    </div>
    <div class="timestamp basis-6">
        <!-- TODO: this is too long and looks awful. -->
        <!-- {timestamp} -->
    </div>
</div>

<style>
    div:hover .controls {
        display: block;
    }
</style>
