Card with header label and link

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "book-open"/"link") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Card, CardContent } from "@/components/ui/card"

const item = {
  label: "Documentation",
  description:
    "Find guides, API references, and examples to integrate with our platform.",
  link: "View docs",
}
</script>

<template>
  <Card class="w-full max-w-xs p-0">
    <CardContent class="p-0">
      <div class="border-b px-4 py-3">
        <div class="text-muted-foreground flex items-center gap-2 [&_svg]:size-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="lucide lucide-book-open"
          ><path d="M12 7v14" /><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" /></svg>
          <span class="text-foreground text-sm font-medium">
            {{ item.label }}
          </span>
        </div>
      </div>
      <div class="space-y-3 p-4">
        <p class="text-muted-foreground text-sm leading-relaxed">
          {{ item.description }}
        </p>
        <a
          href="#"
          class="text-primary inline-flex items-center gap-1 text-xs font-medium hover:underline"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="lucide lucide-link size-2.5 shrink-0"
          ><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></svg>
          {{ item.link }}
        </a>
      </div>
    </CardContent>
  </Card>
</template>