<script setup lang="ts">

// type

type Props = {
    title: string,
    date: string,
    username: string,
    content: string,
}

// props

const props = defineProps<Props>();
const { date } = toRefs(props);

// state

const formattedDate = useDateFormat(date.value, "YYYY/MM/DD");

</script>

<template>
    <div class="w-full p-6 xs:p-12 rounded-150 bg-white border-[0.5px] border-slate-200 flex flex-col gap-6">
        <div class="flex justify-between items-start w-full max-sm:flex-col gap-4">
            <div class="flex flex-col gap-3">
                <span class="text-lg font-semibold sm:typo-h-6 text-black">
                    خیلی محصول خوبی بودددد
                </span>
                <span class="typo-p-xs sm:typo-p-sm text-slate-500">
                    {{ username }}
                    در
                    {{ formattedDate }}
                </span>
            </div>
            <Rating :rate="2"/>
        </div>
        <div class="typo-p-md">
            {{ content }}
        </div>
    </div>
</template>