Hover card with an image and text content.

<!--
  Порт c-hover-card-5 ("Hover card with image preview") —
  .agent-tmp/reui-upstream/registry-reui/bases/radix/components/hover-card/c-hover-card-5.tsx

  `picsum.photos` (внутри `HoverCardContent`, не смонтирован закрытым)
  заменён локальным 1×1 `data:` URI (`PIXEL`) — тот же приём, что и везде,
  где сетевые картинки запрещены; здесь дополнительная причина не нужна
  (недетерминированность picsum, см. docs/PORTING.md "picsum.photos —
  не сид, а cache-buster"), но контент и так не рендерится закрытым.
-->
<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"

const PIXEL = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAUwAOw=="
</script>

<template>
  <div class="flex min-h-[100px] items-center justify-center">
    <HoverCard :open-delay="100" :close-delay="100">
      <HoverCardTrigger as-child>
        <Button variant="outline">View Image</Button>
      </HoverCardTrigger>
      <HoverCardContent class="w-[320px] overflow-hidden p-0">
        <img :src="PIXEL" alt="Card Image" class="aspect-video w-full object-cover" />
        <div class="space-y-1 p-3">
          <p class="font-medium">Image Overview</p>
          <p class="text-muted-foreground leading-relaxed">Visual overview of generated landing page.</p>
        </div>
      </HoverCardContent>
    </HoverCard>
  </div>
</template>