<template>
    <div class="flex flex-col w-full items-center sticky top-0 bg-white dark:bg-black z-10">
        <div class="container max-w-screen-lg flex flex-col p-6">
            <div class="flex justify-between items-center">
                <div class="flex gap-4">
                    <div class="flex items-center text-xl gap-2" v-if="!collect">
                        <UIcon name="i-heroicons-rectangle-stack-20-solid" />
                        <div>主题</div>
                    </div>
                    <template v-else>
                        <UButton
                            icon="i-heroicons-chevron-left"
                            color="gray"
                            variant="ghost"
                            to="/library"
                        />
                        <div class="flex items-center text-xl gap-2">
                            <UIcon name="i-heroicons-squares-2x2" />
                            <div>{{ collect }}</div>
                        </div>
                    </template>
                </div>
                <div class="flex">
                    <UInput
                        v-model="searchQuery"
                        icon="i-heroicons-magnifying-glass-20-solid"
                        placeholder="搜索你的主题..."
                        size="md"
                    />
                </div>
            </div>
            <div v-if="description" class="text-gray-500 ml-12 mt-2">{{ description }}</div>
        </div>
        <UDivider />
    </div>
</template>
<script setup>
defineProps({
    collect: {
        type: String,
        default: ''
    },
    description: {
        type: String,
        default: ''
    }
})
const searchQuery = ref('')
</script>
