---
type Props = {
  url: string;
  placement?: string;
};

const { url, placement } = Astro.props;
const p = placement || "instagram_embed";
const targetId = `ig.${p}.${url}`;
let domain = "";
try {
  domain = new URL(url).hostname;
} catch {
  domain = "";
}
---

<blockquote class="instagram-media" data-instgrm-permalink={url} data-instgrm-version="14">
  <a
    href={url}
    target="_blank"
    rel="noopener noreferrer"
    data-umami-event="outbound_click"
    data-umami-event-target_id={targetId}
    data-umami-event-placement={p}
    data-umami-event-target_url={url}
    data-umami-event-domain={domain || "unknown"}
    data-umami-event-source="instagram"
    data-umami-event-ui_placement="instagram_embed"
  >
    View on Instagram
  </a>
</blockquote>
