---
import { withUtm } from "../lib/url";

type Platform = "youtube" | "instagram" | "podcast";

type Props = {
  platform: Platform;
  placement: string;
  url: string;
  label: string;
  id?: string;
  campaign?: string;
  class?: string;
};

const { platform, placement, url, label, id, campaign, class: className } = Astro.props;

const trackedUrl = withUtm(url, {
  utm_source: "website",
  utm_medium: "cta",
  utm_campaign: campaign || "social-acquisition",
  utm_content: `${platform}:${placement}`,
});

function slugify(input: string) {
  return input
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-+|-+$/g, "")
    .slice(0, 40);
}

const fallbackId = `cta.${placement}.${platform}.${slugify(label) || "action"}`;
const targetId = id || fallbackId;
---

<a
  class={`cta ${className || ""}`}
  href={trackedUrl}
  rel="me noopener noreferrer"
  target="_blank"
  data-umami-event="cta_click"
  data-umami-event-target_id={targetId}
  data-umami-event-placement={placement}
  data-umami-event-target_url={url}
  data-umami-event-platform={platform}
  data-umami-event-target={url}
>
  {label}
</a>
