<script setup lang="ts">
/**
 * STUB props-driven sprite display.
 *
 * Pending decisions on sprite sheet format (CSS background, SVG
 * symbol, animation timeline).
 */
import { computed } from "vue"
import { Construction } from "@lucide/vue"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export interface SpriteDisplayProps {
  label?: string
  classList?: string[] | string
}

const props = defineProps<SpriteDisplayProps>()

const rootClass = computed<string>(() => {
  const cl = props.classList
  if (!cl) {
    return ""
  }
  return Array.isArray(cl) ? cl.join(" ") : cl
})
</script>

<template>
  <Card
    :class="rootClass"
    data-testid="sprite-display"
  >
    <CardHeader class="flex flex-row items-center gap-3 p-4">
      <Construction class="size-5 text-muted-foreground" />
      <div class="flex-1">
        <CardTitle class="text-base">
          {{ label ?? "Sprite" }}
        </CardTitle>
        <CardDescription>
          Coming soon — sprite playback is not yet implemented.
        </CardDescription>
      </div>
      <Badge variant="secondary">
        sprite
      </Badge>
    </CardHeader>
    <CardContent class="p-4 pt-0 text-sm text-muted-foreground">
      Sprite sheet format TBD.
    </CardContent>
  </Card>
</template>
