---
import type { Props as AstroProps } from 'astro';

interface Props {
  tags?: string[];
}
const { tags = [] } = Astro.props;
const selectedTag = Astro.url.searchParams.get('tag');

const links = [
  { label: "github", href: "https://github.com/DerGrumpf", icon: "/github.png" },
  { label: "gitea", href: "https://git.cyperpunk.de", icon: "/git.png" },
  { label: "instagram", href: "https://www.instagram.com/dergrumpf/", icon: "/instagram.png" },
  { label: "matrix", href: "https://matrix.to/#/@dergrumpf:cyperpunk.de", icon: "/matrix.png" },
  { label: "spotify", href: "https://open.spotify.com/user/fackthatshiet?si=d502739d787e497e", icon: "/spotify.png" },
  { label: "rss",   href: "/rss.xml",                 icon: "/rss.png"   },
];
---
<div id="sidebar-inner" class="flex flex-col h-full px-4 py-6 gap-6 w-56 bg-ctp-mantle border-r border-ctp-surface">

  <div id="profile" class="flex flex-col items-center gap-2 text-center">
    <img src="/avatar.jpg" alt="Phil Keier" class="w-full rounded-full object-cover" />
    <div id="profile-name" class="px-4">
      <div class="text-ctp-text text-xl font-bold">Phil Keier</div>
      <div class="text-ctp-subtext text-lg text-sm">DerGrumpf</div>
    </div>
    <div id="profile-tagline" class="text-ctp-subtext text-xs leading-snug">
      Media Scientist, Programmer, Linux Enthusiast
    </div>
  </div>

  <div id="sidebar-links" class="flex flex-wrap gap-2 justify-center">
  {links.map((link) => (
    <a href={link.href} class="flex items-center gap-2 text-ctp-subtext hover:text-ctp-accent text-sm transition-colors">
      <img src={link.icon} alt={link.label} class="w-8 h-8 icon-mono" />
    </a>
   ))}
  </div>

  <div id="sidebar-topics" class="flex flex-col gap-2">
  <span class="section-label text-ctp-overlay text-xs uppercase tracking-widest">topics</span>
  <div id="tags" class="flex flex-wrap gap-1">
    {tags.map((tag) => (
  <a href={`/blog?tag=${tag}`} class={`tag text-xs px-2 py-0.5 rounded-full cursor-pointer transition-colors ${selectedTag === tag ? 'bg-ctp-accent text-ctp-base' : 'bg-ctp-surface text-ctp-subtext hover:text-ctp-accent'}`}>
    {tag}
  </a>
))}
  </div>
</div>

  <div id="theme-switcher" class="flex gap-2 mt-auto pt-4 border-t border-ctp-surface justify-center">
    <button data-flavor="mocha"     class="theme-dot w-4 h-4 rounded-full bg-[#cba6f7] hover:scale-125 transition-transform" title="Mocha"></button>
    <button data-flavor="macchiato" class="theme-dot w-4 h-4 rounded-full bg-[#c6a0f6] hover:scale-125 transition-transform" title="Macchiato"></button>
    <button data-flavor="frappe"    class="theme-dot w-4 h-4 rounded-full bg-[#ca9ee6] hover:scale-125 transition-transform" title="Frappé"></button>
    <button data-flavor="latte"     class="theme-dot w-4 h-4 rounded-full bg-[#8839ef] hover:scale-125 transition-transform" title="Latte"></button>
  </div>

</div>

<script>
  const saved = localStorage.getItem('ctp-theme') ?? 'mocha';
  document.documentElement.setAttribute('data-theme', saved);

  document.querySelectorAll('.theme-dot').forEach(btn => {
    btn.addEventListener('click', () => {
      const flavor = btn.getAttribute('data-flavor');
      document.documentElement.setAttribute('data-theme', flavor);
      localStorage.setItem('ctp-theme', flavor);
    });
  });
</script>