<script setup lang="ts">
    import type { EmployeeListTableItem } from 'src/modules/employee-list/types/employee-list-table-interface';

    // const getEmployeeAvatar = (first_name: string, last_name: string) => {
    //     // add logic here to see if user has an avatar image and return that instead of initials
    //     return first_name.charAt(0) + last_name.charAt(0);
    // };

    const { row } = defineProps<{
        row: EmployeeListTableItem
    }>()
    const emit = defineEmits<{
        onProfileClick: [email: string]
    }>();
</script>

<template>
    <q-card 
        v-ripple 
        class="column col-xs-6 col-sm-4 col-md-3 col-lg-2 no-wrap rounded-15 cursor-pointer q-ma-sm" 
        style="max-width: 230px;"
        @click="emit('onProfileClick', row.email)"
    >
        <q-card-section class="col-6 text-center">
            <q-avatar 
                color="primary" 
                size="8em"
                class="shadow-3"
            >
                <img 
                    src="src/assets/targo-default-avatar.png" 
                    alt="employee avatar" 
                    class="q-pa-xs"
                >
            </q-avatar>
        </q-card-section>

        <q-card-section 
            class="col-grow text-center text-h6 text-weight-medium text-uppercase q-pb-none" 
            style="line-height: 0.8em;"
        >
            <div class="ellipsis text-primary"> {{ row.first_name }} {{ row.last_name }} </div>
            <q-separator color="primary" class="q-mx-sm q-mt-xs" />
            <div class=" ellipsis-2-lines text-caption"> {{ row.job_title }} </div>
        </q-card-section>

        <q-card-section class="bg-primary text-white text-caption text-center q-py-none col-2 content-center ">
            <div> {{ row.email }} </div>
        </q-card-section>
    </q-card>
</template>