---
import { getPermalink } from '~/utils/permalinks';

import { BLOG } from '~/config.mjs';
import type { Post } from '~/types';

export interface Props {
  tags: Post['tags'];
  class?: string;
}

const { tags, class: className = 'text-sm' } = Astro.props;
---

{
  tags && Array.isArray(tags) && (
    <ul class={className}>
      {tags.map((tag) => (
        <li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 mb-2 py-0.5 px-2 lowercase font-medium">
          {BLOG?.tag?.disabled ? (
            tag
          ) : (
            <a
              href={getPermalink(tag, 'tag')}
              class="text-muted dark:text-slate-300 hover:text-primary dark:hover:text-gray-200"
            >
              {tag}
            </a>
          )}
        </li>
      ))}
    </ul>
  )
}
