---
export interface Props {
  categories: string[];
  class?: string;
}

const { categories, class: className = "text-sm" } = Astro.props;
---

{
  categories && Array.isArray(categories) && (
    <ul class:list={["flex flex-wrap gap-2", className]}>
      {categories.map((category) => (
        <li class="inline-block relative">
          <a
            href={`/category/${category}`}
            class="inline-block bg-primary/10 hover:bg-primary/20 text-primary hover:text-primary px-3 py-1 rounded-full border border-primary/20 transition-colors duration-200"
          >
            {category}
          </a>
        </li>
      ))}
    </ul>
  )
}
