import { useTranslations } from 'next-intl'
import { Link } from '@/i18n/navigation'
import { TagInfo } from '@/lib/tags'

interface TagCloudProps {
  tags: Array<TagInfo & { size: 'sm' | 'md' | 'lg' | 'xl' }>
}

export function TagCloud({ tags }: TagCloudProps) {
  const t = useTranslations('Tags')
  const sizeClasses = {
    sm: 'text-xs opacity-70',
    md: 'text-sm',
    lg: 'text-base font-bold',
    xl: 'text-lg font-bold',
  }

  return (
    <div className="flex flex-wrap gap-4 items-baseline">
      {tags.map(tag => (
        <Link
          key={tag.slug}
          href={`/tags/${tag.slug}`}
          className={`
            ${sizeClasses[tag.size]}
            font-mono uppercase
            text-zinc-400
            hover:text-cyan-400
            transition-colors
          `}
          title={t('postsWithTag', { count: tag.count, tag: tag.name })}
        >
          #{tag.name}
        </Link>
      ))}
    </div>
  )
}