---
interface Props {
	tags: string[];
	withHref?: boolean;
}

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

<div class="flex flex-wrap">
	{
		tags.map((tag: string) => {
			const element = (
				<span class="mb-2 mr-2 rounded-xl bg-stone-600 px-3 py-1 text-xs font-bold uppercase text-white hover:bg-stone-500">
					#{tag}
				</span>
			);
			return withHref ? <a href={`/tags/${tag}`}>{element}</a> : element;
		})
	}
</div>
