---
import type { Tag } from '@/types/common';

import TagComponent from './tag.astro';

export interface Props {
  tags: Tag[];
}

const { tags } = Astro.props;
---

<div class="flex flex-wrap gap-3">
  {
    tags.map(({ name: tagName, icon, iconColor, url }) =>
      url ? (
        <a href={url} target="_blank" rel="noopener noreferrer">
          <TagComponent name={icon} color={iconColor}>
            {tagName}
          </TagComponent>
        </a>
      ) : (
        <TagComponent name={icon} color={iconColor}>
          {tagName}
        </TagComponent>
      )
    )
  }
</div>
