---
import type { TagsList } from '@/types/shared';
import Tag from './tag.astro';
import Typography from './typography.astro';

export interface Props extends Omit<TagsList, 'title'> {
  title?: TagsList['title'];
}

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

{
  title ? (
    <div class="flex flex-col gap-1.5">
      <Typography variant="label">{title}:</Typography>
      <div class="flex flex-wrap gap-3">
        {tags.map((tag) => (
          <Tag {...tag} />
        ))}
      </div>
    </div>
  ) : (
    <div class="flex flex-wrap gap-3">
      {tags.map((tag) => (
        <Tag {...tag} />
      ))}
    </div>
  )
}
