import { cn } from '@/lib/utils'

interface TagCloudProps {
  tags: string[]
  activeTags?: string[]
  onTagClick: (tag: string) => void
}

export function TagCloud({ tags, activeTags = [], onTagClick }: TagCloudProps) {
  if (tags.length === 0) return null

  return (
    <div className="px-3 py-2">
      <p className="mb-2 px-3 font-heading text-[0.6875rem] font-bold uppercase tracking-[0.04em] text-muted-foreground">
        Popular Tags
      </p>
      <div className="flex flex-wrap gap-1 px-3">
        {tags.map(tag => {
          const isActive = activeTags.includes(tag)
          return (
            <button
              key={tag}
              onClick={() => onTagClick(tag)}
              className={cn(
                'rounded-md border px-2 py-0.5 font-label text-[0.625rem] transition-colors',
                isActive
                  ? 'border-primary/30 bg-primary/10 text-primary'
                  : 'border-border bg-card text-muted-foreground hover:border-primary/20 hover:text-foreground'
              )}
            >
              {tag}
            </button>
          )
        })}
      </div>
    </div>
  )
}
