<template>
    <button type="button" class="flex items-start justify-between w-full">
        <span class="flex items-center justify-start gap-2.5 flex-1">
            <img
                :src="sender.profile_photo_url"
                alt="user"
                class="w-10 h-10 transition-all rounded-full"
                :class="active ? 'ring-2 ring-blue-300' : ''"
            />
            <span class="flex items-start flex-col gap-1.5 flex-1">
                <span
                    class="text-sm font-semibold transition-all line-clamp-1 text-start"
                    :class="active ? 'text-blue-300' : ''"
                    >{{ sender.name }}</span
                >
                <span
                    v-if="chat.chatable"
                    class="font-semibold text-gray-200 text-2xs line-clamp-1 text-start"
                    >{{ chat.chatable?.title }}</span
                >
            </span>
        </span>
        <span v-if="chat.last_message_at">
            <span class="text-gray-200 text-2xs whitespace-nowrap">{{
                moment(chat.last_message_at).fromNow()
            }}</span>
        </span>
    </button>
</template>

<script>
export default {
    props: {
        chat: {
            type: Object,
            required: true,
        },
        active: {
            type: Boolean,
            default: false,
        },
        is: {
            type: String,
            required: true,
        },
    },
    computed: {
        sender: function () {
            if (this.is == "user") {
                return this.chat?.worker;
            } else {
                return this.chat?.user;
            }
        },
    },
};
</script>
