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

type Highlight = {
    icon: string;
    title: string;
    description: string;
};

// state

const highlights = ref<Highlight[]>([
    {
        icon: "ci:headset",
        title: "خدمات مشتری",
        description: "پشتیبانی استثنایی، راه‌حل‌های پایدار",
    },
    {
        icon: "ci:delivery",
        title: "ارسال سریع و رایگان",
        description: "ارسال رایگان برای سفارش‌های بالای ۱۵۰ دلار",
    },
    {
        icon: "ci:users",
        title: "معرفی به دوستان",
        description: "دوستان خود را معرفی کنید و هر دو ۱۵٪ تخفیف بگیرید",
    },
    {
        icon: "ci:shield-done",
        title: "پرداخت امن",
        description: "اطلاعات پرداخت شما به‌صورت امن پردازش می‌شود",
    },
]);
</script>

<template>
    <section class="w-full flex-center py-[5rem] gap-[1.25rem] container">
        <template v-for="(highlight, index) in highlights" :key="index">
            <div class="flex flex-col-center gap-[.75rem] w-1/4 px-5">
                <div class="size-[1.5rem] flex-center">
                    <Icon :name="highlight.icon" />
                </div>
                <div class="w-full flex-col-center gap-[.25rem]">
                    <span class="typo-sub-h-md text-black text-center">
                        {{ highlight.title }}
                    </span>
                    <p class="text-slate-500 typo-p-md text-center">
                        {{ highlight.description }}
                    </p>
                </div>
            </div>

            <div
                class="w-[1px] h-[5rem] bg-slate-200"
                v-if="index + 1 != highlights.length"
            />
        </template>
    </section>
</template>

<style scoped></style>
