<script setup lang="ts">
// imports

import { usePersianTimeAgo } from "~/composables/global/usePersianTimeAgo";

// types

type Props = {
    data: Omit<Ticket, "messages">;
};

// props

const props = defineProps<Props>();

const { data } = toRefs(props);

// computed

const createdTimeAgo = usePersianTimeAgo(new Date(data.value.created_at));
const updatedTimeAgo = usePersianTimeAgo(new Date(data.value.updated_at));
</script>

<template>
    <tr
        class="odd:bg-white even:bg-gray-50 last:border-none border-b border-slate-200"
    >
        <td
            scope="row"
            class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
        >
            {{ data.ticket_category ? data.ticket_category : "--" }}
        </td>
        <td class="w-3/12 px-6 py-6">
            {{ data.subject ? data.subject : "--" }}
        </td>
        <td
            class="w-3/12 px-6 py-6 flex flex-col gap-3 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
        >
            <span class="w-full whitespace-pre">
                ایجاد : {{ data.created_at ? createdTimeAgo : "--" }}
            </span>
            <span class="w-full whitespace-pre">
                بروزرسانی : {{ data.updated_at ? updatedTimeAgo : "--" }}
            </span>
        </td>
        <td class="w-2/12 px-6 py-6 text-xs lg:text-sm whitespace-pre shrink-0">
            <div
                class="w-max rounded-full py-1.5 px-3 text-xs border"
                :class="{
                    'text-warning-600 bg-warning-100 border-warning-600':
                        data.status == 'در انتظار پاسخ',
                    'text-success-600 bg-success-100 border-success-600':
                        data.status == 'پاسخ داده شده',
                    'text-danger-600 bg-danger-100 border-danger-600':
                        data.status == 'بسته شده',
                }"
            >
                {{ data.status ? data.status : "--" }}
            </div>
        </td>
        <td class="w-1/12 px-6 py-6 shrink-0">
            <NuxtLink
                :to="{ name: 'profile-tickets-id', params: { id: data.id } }"
            >
                <button
                    class="size-9 lg:size-10 flex-center border border-slate-200 rounded-md"
                >
                    <Icon
                        name="ci:eye-open"
                        class="**:stroke-black"
                        size="20"
                    />
                </button>
            </NuxtLink>
        </td>
    </tr>
</template>

<style scoped></style>
