<template>
    <div class="flex flex-col items-center justify-center w-full h-full">
        <ILogo />
        <div class="mt-2">开源搜索，直达结果</div>
        <ICreate ref="refCreate" />
        <div class="max-w-screen-md w-full p-6 grid grid-cols-1 lg:grid-cols-2 gap-4">
            <template v-for="(item, index) in recommendQuestions" :key="index">
                <UButton
                    class="flex justify-between"
                    color="gray"
                    variant="soft"
                    size="md"
                    :trailing-icon="item.c_id ? 'i-heroicons-chevron-right-20-solid' : 'i-heroicons-plus-20-solid'"
                    :label="item.title"
                    :to="item.c_id ? `/search/${item.c_id}` : ''"
                    @click="handleSearch(item)"
                />
            </template>
        </div>
    </div>
</template>
<script setup>
const recommendQuestions = [
    {
        title: '如何解决 CORS 问题',
        c_id: 'c_CawfQuhqPxGy1Ny9'
    },
    {
        title: 'Tailwind CSS 响应式设计指南',
        c_id: 'c_1iVipFddPrGXDioC'
    },
    {
        title: '有哪些有效的方法可以应对 DDoS 攻击？'
    },
    {
        title: '如何防止网站被爬'
    }
]
const refCreate = ref(null)
function handleSearch (item) {
    if (!item.c_id) refCreate.value.handleQuickSearch(item.title)
}
</script>