---
// The mu/Eurosky trusted verifier checkmark: a check inside a ragged (scalloped) circle.
// mu brand colors are fixed: the badge is always mu-pink (#db4aa6), the check is always white.
// These are mu's brand constants, not our site's accent — so they don't use CSS variables.
interface Props {
  size?: number;
  class?: string;
}
const { size = 24, class: className = '' } = Astro.props;
// 12-point scalloped seal, symmetric, centered at (12,12)
// Each point is at radius 10.5, each valley at radius 8.5
const pts = 12;
const rOut = 10.5;
const rIn = 8.5;
let d = '';
for (let i = 0; i < pts * 2; i++) {
  const r = i % 2 === 0 ? rOut : rIn;
  const a = (Math.PI / pts) * i - Math.PI / 2;
  const x = 12 + r * Math.cos(a);
  const y = 12 + r * Math.sin(a);
  d += i === 0 ? `M${x.toFixed(2)} ${y.toFixed(2)}` : `L${x.toFixed(2)} ${y.toFixed(2)}`;
}
d += 'Z';
---

<svg
  class={`verify-badge ${className}`}
  width={size}
  height={size}
  viewBox="0 0 24 24"
  fill="none"
  aria-hidden="true"
>
  <path d={d} fill="#db4aa6" />
  <path
    d="M7 12l3.5 3.5L17 9"
    stroke="#ffffff"
    stroke-width="2.2"
    stroke-linecap="round"
    stroke-linejoin="round"
    fill="none"
  />
</svg>

<style>
  .verify-badge {
    display: inline-block;
    flex: none;
    vertical-align: middle;
  }
</style>