<script setup lang="ts">
/**
 * Props-driven stub for `editor/image-editor`.
 *
 * Placeholder until the canvas-based crop / annotate editor lands.
 * Reserves the `modelValue` slot so a saved value (data URL or asset
 * reference) round-trips even though there's no real UI yet.
 *
 *   <ImageEditor label="Banner" />
 */
import { Construction } from "@lucide/vue"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { FieldFrame } from "@/components/ui/field-frame"

export interface ImageEditorProps {
  modelValue?: string | null
  id?: string
  name?: string
  label?: string
  hideLabel?: boolean
  required?: boolean
  disabled?: boolean
  helpText?: string
  errors?: string[]
}

withDefaults(defineProps<ImageEditorProps>(), {
  errors: () => [],
})

defineModel<string | null>("modelValue")
</script>

<template>
  <FieldFrame
    :label="label"
    :required="required"
    :hide-label="hideLabel"
    :for="id"
    :help-text="helpText"
    :errors="errors"
    data-testid="image-editor"
  >
    <Card class="border-dashed" :data-element-name="name ?? undefined" data-stub="editor/image-editor">
      <CardContent class="flex items-center gap-3 py-6 text-sm text-muted-foreground">
        <Construction class="h-5 w-5" />
        <span>Image editor — coming soon</span>
        <Badge variant="outline" class="ml-auto font-mono text-[10px]">
          editor/image-editor
        </Badge>
      </CardContent>
    </Card>
  </FieldFrame>
</template>
