<template>
    <div class="recent-factor-item">
        <div>
            <div>
                <span>{{ $t("factor") }} :</span>
                <span>{{ invoiceNumber }}</span>
            </div>
            <div>
                <span>{{ $t("date") }} :</span>
                <span>{{ new Date(createdAt).toLocaleDateString('fa-IR') }}</span>
            </div>
        </div>
        <router-link :to="{ query: { id } }">
            <Button icon="isax isax-arrow-left" severity="secondary" text rounded />
        </router-link>
    </div>
</template>

<script setup>
const props = defineProps(['data'])
const { _id: id, invoiceNumber, createdAt } = props.data
</script>

<style lang="scss">
.recent-factor-item {
    @apply w-[19.9rem] sm:w-[16.8rem] h-20 lg:h-[5.6rem] flex gap-2 bg-[#F2F2F2] rounded-[0.6rem] p-4;

    &>div {
        @apply flex flex-col h-full justify-between gap-3;

        &>div {
            @apply flex gap-2 items-center font-vazir;

            span:nth-of-type(1) {
                @apply text-[#999999] text-xs lg:text-[1.1em];
            }

            span:nth-of-type(2) {
                @apply text-[#333] text-xs lg:text-[1.1em] font-medium;
            }
        }
    }


    a {
        @apply self-end mr-auto #{!important};

        button {
            @apply -m-2 w-10 h-10;

            .p-button-icon {
                @apply text-xl text-[#292D32] lg:text-2xl;
            }
        }
    }
}
</style>
