<script lang="ts" setup>
const tab = ref('text')
</script>

<template>
  <div class="flex flex-col gap-4">
    <Tabs
      v-model="tab"
      class="w-[400px]"
    >
      <TabsList>
        <TabsTrigger value="text">
          <div class="flex items-center gap-1">
            <Icon name="tabler:article" />
            <span>文本生成</span>
          </div>
        </TabsTrigger>
        <TabsTrigger value="chapter">
          <div class="flex items-center gap-1">
            <Icon name="tabler:text-plus" />
            <span>章节生成</span>
          </div>
        </TabsTrigger>
        <TabsTrigger value="bot">
          <div class="flex items-center gap-1">
            <Icon name="tabler:robot" />
            <span>课程智能体</span>
          </div>
        </TabsTrigger>
      </TabsList>
    </Tabs>
    <div class="flex items-start。 gap-4">
      <div
        v-if="tab === 'chapter'"
        class="flex h-20 flex-col justify-center items-center gap-1 px-8 rounded-md border"
      >
        <Icon
          name="tabler:text-plus"
          class="text-3xl"
        />
        <span class="text-xs font-medium">选择章节</span>
      </div>
      <Textarea
        placeholder="请输入文本来生成内容"
        class="h-20 flex-1"
      />
      <div class="flex flex-col items-center gap-2">
        <Button size="lg">
          <Icon name="tabler:stars" />
          生成教案
        </Button>
        <p class="text-xs text-foreground/40">内容由 AI 生成，仅供参考</p>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
