---
import { type Lang } from '@/i18n/utils';
import { defaultLang } from '@/i18n/ui';
import { getBlogBaseUrl, extractCategories } from '@/utils/blog-utils';

// Define component props
interface Props {
  lang?: Lang;
  currentCategory?: string;
}

// Get component props
const { lang = defaultLang, currentCategory = '' } = Astro.props;

// Determine base URL path
const baseUrl = getBlogBaseUrl(lang);

// Read all blog posts - choose different static paths based on language
const postsGlob = {
  en: await import.meta.glob('/src/pages/blog/posts/*.md', { eager: true }),
  zh: await import.meta.glob('/src/pages/zh/blog/posts/*.md', { eager: true })
};

// Get posts for current language
const allPosts = lang === 'zh' ? Object.values(postsGlob.zh) : Object.values(postsGlob.en);

// Extract categories from posts
const categoryMap = extractCategories(allPosts);

// Convert to array and sort
const categories = Array.from(categoryMap.keys()).sort();

// Multilingual titles
const titles = {
  en: 'Categories',
  zh: '分类'
};

// Get title for current language
const title = titles[lang] || titles[defaultLang];
---

<div class="bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border">
  <h3 class="text-xl font-semibold text-card-foreground mb-4 flex items-center">
    <svg class="w-5 h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14-7l2 2-2 2m2-2H9m10 0V9M5 19l2-2-2-2m2 2H3m2 0v2"></path>
    </svg>
    {title}
  </h3>
  <div class="space-y-2">
    {categories.map((cat) => {
      const categoryId = categoryMap.get(cat) || cat.toLowerCase();
      return (
        <a href={`${baseUrl}/categories/${encodeURIComponent(categoryId)}`} 
           class={`block transition-colors duration-200 ${categoryId === currentCategory.toLowerCase() ? 'text-purple-500 font-medium' : 'text-muted-foreground hover:text-purple-500'}`}>
          {cat}
        </a>
      );
    })}
  </div>
</div>