<template>
  <div class="flex flex-col h-full overflow-auto py-6 px-6">
    <div class="pt-30">
      <h1 class="text-[28px] font-bold mb-7 leading-tight dark:text-gray-100">
        你好，<br />
        我今天能帮你什么？
      </h1>
      <div class="flex flex-wrap gap-3">
        <button
          v-for="tag in quickTags"
          :key="tag"
          class="px-3 py-1.5 rounded-2xl border border-[#E5E8EE] dark:border-[#2a2a2d] text-[13px] text-[#333] dark:text-gray-100 cursor-pointer hover:bg-[#2B7FFF] hover:text-white hover:border-[#2B7FFF] transition-colors"
          @click="emit('click-tag', tag)"
        >
          {{ tag }}
        </button>
      </div>
    </div>
    <div class="mt-auto">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
const quickTags = ['智能问数', '写代码', '查数据', '生成图片']

const emit = defineEmits<{
  (e: 'click-tag', tag: string): void
}>()
</script>
