---
import SourceBadge from "./SourceBadge.astro";
import type { MediaAsset } from "../lib/api";
const { asset, compact = false, sourceLink = false } = Astro.props as { asset: MediaAsset; compact?: boolean; sourceLink?: boolean };
---
<figure class:list={["entity-media", { "entity-media--compact": compact }]}>
  <span class="entity-media__frame"><picture>
    {(["avif", "webp"] as const).map(format => {
      const variants = (asset.variants ?? []).filter(item => item.format === format);
      return variants.length ? <source type={`image/${format}`} srcset={variants.map(item => `${item.url} ${item.width}w`).join(", ")} sizes={compact ? "180px" : "(max-width: 720px) 100vw, 720px"} /> : null;
    })}
    <img src={asset.image_url} alt={asset.label ?? "Иллюстрация RF4"} width={asset.width} height={asset.height} loading="lazy" decoding="async" />
  </picture></span>
  <figcaption><SourceBadge source={asset.source_system} href={sourceLink ? asset.source_url : undefined} /><span>{asset.label ?? "Справочный материал"}</span></figcaption>
</figure>