<script lang="ts" setup>
import { Icon } from '@iconify/vue/dist/iconify.js'

export interface ImageResult {
  result: 'success' | 'error' | 'pending' | 'idle'
  imageUrl: string
  message?: string
}

defineProps<{
  imageResult: ImageResult
}>()
</script>

<template>
  <div class="relative h-full min-h-[50vh] w-full flex flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2">
    <Badge variant="outline" class="absolute left-3 top-3">
      图片输出
    </Badge>
    <div v-if="imageResult.result === 'pending'" class="flex flex-1 items-center justify-center text-xl">
      <Icon icon="akar-icons:loading" class="mr-2 animate-spin" />
      <span>正在加载图片</span>
    </div>
    <Image v-else-if="imageResult.result === 'success'" class="flex flex-1 items-center justify-center text-xl" :image-url="imageResult.imageUrl" />
    <div v-else class="flex flex-1 items-center justify-center text-xl">
      {{ imageResult.message }}
    </div>

    <Button type="submit" size="sm" class="ml-auto gap-1.5">
      下载图片
      <CornerDownLeft class="size-3.5" />
    </Button>
  </div>
</template>
