<template>
    <section
        class="flex flex-col justify-between w-full gap-2 sm:items-center sm:flex-row"
    >
        <div class="flex flex-col gap-1.5">
            <p class="text-sm font-medium text-gray-300 line-clamp-1">
                <a
                    :href="route(link, sender.slug)"
                    class="text-sm font-medium grey-200"
                >
                {{ sender.name }}
                </a>
                
            </p>
            <span class="text-xs font-medium text-gray-200 line-clamp-1">
                {{ sender.tag_line }}
            </span>
        </div>
        <Button
            :disabled="loading"
            :loading="loading"
            size="xs"
            buttonStyle="transparent"
            @click="createZoomMeeting"
        >
            <span class="flex items-center justify-start w-full gap-2">
                <svg
                    class="w-6 h-6"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 50.667 50.667"
                >
                    <path
                        d="M25.333 50.667c13.992 0 25.334-11.343 25.334-25.334S39.325 0 25.333 0 0 11.342 0 25.333s11.342 25.334 25.333 25.334z"
                        fill="#2196f3"
                    />
                    <path
                        clip-rule="evenodd"
                        d="M14.866 32.574h16.755V20.288c0-1.851-1.5-3.351-3.351-3.351H11.515v12.286c0 1.851 1.5 3.351 3.351 3.351zm18.988-4.467l6.702 4.467V16.937l-6.701 4.468z"
                        fill="#fff"
                        fill-rule="evenodd"
                    />
                </svg>
                <span> Create a Zoom meeting </span>
            </span>
        </Button>
    </section>
</template>

<script>
import Button from "@/Jetstream/Button.vue";

export default {
    props: {
        sender: {
            type: Object,
            required: true,
        },
        loading: {
            type: Boolean,
            default: false,
        },
        is: {
            type: String,
            required: true,
        },
        chat: {
            type: Object,
            required: true,
        },
    },
    methods: {
        createZoomMeeting() {
            this.$emit("createZoomMeeting");
        },
    },
    components: {
        Button,
    },
    computed: {       
        link: function () {
            if (this.is == "user") {
                return this.chat?.worker_type=="App\\Models\\Engineer"? 'engineer.profile.slugged': 'firm.profile.slugged';
            } else {
                return 'user.profile.slugged';
            }
        },
    },
};
</script>
