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

const links = config.social || [];

// Built-in SVG icons (replacing Starlight's Icon component 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>',
};

// CGit 専用アイコン（cgit.yasutakeyohei.com の favicon に基づく）
const CGIT_SVG =
  '<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="7" cy="7" r="3"/><circle cx="7" cy="17" r="3"/><line x1="7" y1="10" x2="7" y2="14"/><path d="M7 12h6a3 3 0 0 0 3-3V7"/><circle cx="17" cy="7" r="3"/></svg>';
---

{
  links.length > 0 && (
    <>
      {links.map(({ label, href, icon }) => {
        const svg = label === "CGit" ? CGIT_SVG : (BUILTIN[String(icon)] || BUILTIN["code-branch"]);
        return (
        <a href={href} rel="me" class="sl-flex" title={label}>
          <span class="sr-only">{label}</span>
          <span class="sl-social-icon" set:html={svg} />
        </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;
    }
  }
</style>