import Link from 'next/link'
import { TagInfo } from '@/lib/tags'

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

export function TagCloud({ tags }: TagCloudProps) {
  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={`${tag.count} ${tag.count === 1 ? 'articol' : 'articole'}`}
        >
          #{tag.name}
        </Link>
      ))}
    </div>
  )
}