---
import Icon from "./Icon.astro";
import PostCard from "./PostCard.astro";
import Newsletter from "./Newsletter.astro";
import { categories, tags, popularPosts, sortedPosts, authors } from "../lib/blog-data.js";

const recent = (await sortedPosts()).slice(0, 4);
const popular = await popularPosts();
const author = authors[0];
---

<aside class="space-y-10">
  <div>
    <div class="flex items-center gap-3">
      <img src={author.avatar} alt="" width="40" height="40" class="h-10 w-10 rounded-full" />
      <div>
        <div class="text-sm font-medium">{author.name}</div>
        <div class="text-xs text-muted-foreground">Editor</div>
      </div>
    </div>
    <p class="mt-3 text-sm text-muted-foreground">{author.bio}</p>
  </div>

  <div>
    <div class="text-xs font-medium uppercase tracking-wider text-muted-foreground">Categories</div>
    <ul class="mt-3 space-y-2 text-sm">
      {
        categories.map((category) => (
          <li>
            <a href={`/categories/${category.slug}`} class="text-foreground/80 hover:text-primary">
              {category.name}
            </a>
          </li>
        ))
      }
    </ul>
  </div>

  <div>
    <div class="text-xs font-medium uppercase tracking-wider text-muted-foreground">Popular</div>
    <div class="mt-3 space-y-4">
      {popular.map((post) => <PostCard post={post} variant="compact" />)}
    </div>
  </div>

  <div>
    <div class="text-xs font-medium uppercase tracking-wider text-muted-foreground">Recent</div>
    <div class="mt-3 space-y-4">
      {recent.map((post) => <PostCard post={post} variant="compact" />)}
    </div>
  </div>

  <div>
    <div class="text-xs font-medium uppercase tracking-wider text-muted-foreground">Tags</div>
    <div class="mt-3 flex flex-wrap gap-2">
      {
        tags.map((tag) => (
          <a
            href={`/tags/${tag.slug}`}
            class="rounded-full border border-border px-2.5 py-1 text-xs text-muted-foreground hover:border-primary hover:text-primary"
          >
            {tag.name}
          </a>
        ))
      }
    </div>
  </div>

  <Newsletter compact />

  <a href="/rss.xml" class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary">
    <Icon name="rss" class="h-3.5 w-3.5" /> Subscribe via RSS
  </a>
</aside>
