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

interface TagBadgesProps {
  tags: string[]
  maxVisible?: number
  onTagClick?: (tag: string) => void
  size?: 'sm' | 'md'
  variant?: 'default' | 'muted'
}

export function TagBadges({
  tags,
  maxVisible = 3,
  onTagClick,
  size = 'sm',
  variant = 'default',
}: TagBadgesProps) {
  if (!tags || tags.length === 0) return null

  const visibleTags = tags.slice(0, maxVisible)
  const hiddenCount = tags.length - maxVisible

  return (
    <div className="flex flex-wrap items-center gap-1">
      {visibleTags.map((tag) => (
        <button
          key={tag}
          type="button"
          onClick={(e) => {
            if (onTagClick) {
              e.stopPropagation()
              onTagClick(tag)
            }
          }}
          disabled={!onTagClick}
          className={cn(
            'rounded-full font-sans transition-colors',
            size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
            variant === 'default'
              ? 'bg-[var(--color-bg-elevated)] text-muted-foreground border border-border hover:text-foreground hover:border-[var(--color-border-hover)]'
              : 'bg-[rgba(255,255,255,0.04)] text-muted-foreground border border-border hover:text-foreground',
            !onTagClick && 'cursor-default'
          )}
        >
          {tag}
        </button>
      ))}
      {hiddenCount > 0 && (
        <span
          className={cn(
            'rounded-full font-sans',
            size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
            'bg-[rgba(255,255,255,0.04)] text-muted-foreground border border-border'
          )}
          title={tags.slice(maxVisible).join(', ')}
        >
          +{hiddenCount} more
        </span>
      )}
    </div>
  )
}

export default TagBadges
