<template>
    <div>
        <div class="bs-font-medium-2-semi-bold">
            {{ product.id }}
        </div>
        <div v-if="product.customizationDate">
            <div class="bs-font-medium-2-normal">
                Saved {{ product.customizationDate }}
            </div>
            <div class="bs-font-medium-2-normal">
                {{ product.userEmail || 'user_not_found' }}
            </div>
        </div>
        <div v-else style="word-break: break-word"> No customization was done on this product</div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "CustomizedProduct",
    props: {
        product: {
            type: Object,
            required: true,
            default: () => ({
                customizationDate: "",
                userEmail: "",
                id: "",
            }),
        },
    },
});
</script>

<style scoped>
:deep(.bs-font-medium-2-semi-bold) {
    /* bs-font-medium-2-semi-bold */
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px; /* 157.143% */
}
</style>
