import TagLink from '@/components/TagLink'

import type { FC } from 'react'

import type { PostImportDisplayTag } from '@/lib/postImportTypes'

type Props = {
  tags: PostImportDisplayTag[] | undefined }

const PostImportTagLinks: FC<Props> = ({ tags }) => {
  if (tags == null || tags.length === 0)
    return null

  return (
      <div className="flex flex-wrap text-xs gap-x-1">
	{tags.map (tag => {
	  const key = `${ tag.category }:${ tag.name }:${ tag.sectionLiterals?.join ('|') ?? '' }`
	  return (
	      <span key={key} className="inline-flex flex-nowrap items-baseline gap-1">
		<TagLink
		    tag={{
			name: tag.name,
			category: tag.category }}
		    linkFlg={false}
		    withWiki={false}
		    withCount={false}/>
		{tag.sectionLiterals?.map (literal => (
		    <span key={literal} className="text-xs text-neutral-500 dark:text-neutral-400">
		      {literal}
		    </span>))}
	      </span>)
	})}
      </div>)
}

export default PostImportTagLinks
