---
import config from "virtual:starlight/user-config";

const links = config.social || [];

// Built-in SVG icons for social links
const BUILTIN: Record<string, string> = {
  "x.com":
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4l11.733 16h4.267l-11.733 -16z"/><path d="M4 20l6.768 -6.768m2.46 -2.46L20 4"/></svg>',
  "code-branch":
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><line x1="6" y1="8.5" x2="6" y2="15.5"/><path d="M6 12 L18 8"/><circle cx="18" cy="6" r="2.5"/></svg>',
};
---

{
  links.length > 0 && (
    <>
      {links.map(({ label, href }) => (
        <a href={href} rel="me" class="sl-flex" title={label}>
          <span class="sr-only">{label}</span>
          {label === "CGit" ? (
            <span class="sl-social-text">cgit</span>
          ) : (
            <span class="sl-social-icon" set:html={BUILTIN["code-branch"]} />
          )}
        </a>
      ))}
    </>
  )
}

<style>
  @layer starlight.core {
    a {
      color: var(--sl-color-text-accent);
      padding: 0.5em;
      margin: -0.5em;
    }
    a:hover {
      color: var(--sl-color-white);
    }
    .sl-social-icon :global(svg) {
      width: 1rem;
      height: 1rem;
      display: block;
    }
    .sl-social-text {
      font-size: 0.8rem;
      font-weight: 700;
      line-height: 1;
      font-family: var(--__sl-font-mono, monospace);
    }
  }
</style>