Momento/memento-note/components/label-badge.tsx

'use client'

import { cn } from '@/lib/utils'
import { X, Sparkles } from 'lucide-react'

interface LabelBadgeProps {
  label: string
  type?: 'ai' | 'user'
  onRemove?: () => void
  variant?: 'default' | 'filter' | 'clickable'
  onClick?: () => void
  isSelected?: boolean
  isDisabled?: boolean
}

export function LabelBadge({
  label,
  type,
  onRemove,
  variant = 'default',
  onClick,
  isSelected = false,
  isDisabled = false,
}: LabelBadgeProps) {
  const isAI = type === 'ai'

  return (
    <button
      type="button"
      onClick={onClick}
      disabled={isDisabled}
      className={cn(
        'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[9px] font-bold uppercase tracking-wider transition-all',
        variant === 'filter' && !isSelected && 'cursor-pointer',
        variant === 'clickable' && 'cursor-pointer',
        isDisabled && 'opacity-50 cursor-not-allowed',
        isSelected
          ? 'bg-foreground text-background border-foreground shadow-sm'
          : isAI
            ? 'bg-[#75B2D6]/10 border-[#75B2D6]/25 text-[#75B2D6]'
            : 'bg-[#8D8D8D]/10 border-[#8D8D8D]/25 text-[#8D8D8D]',
      )}
    >
      {isAI && (
        <Sparkles size={8} className="text-[#75B2D6]/70" />
      )}
      <span className="truncate">{label}</span>
      {onRemove && (
        <span
          role="button"
          tabIndex={0}
          onClick={(e) => {
            e.stopPropagation()
            onRemove()
          }}
          onKeyDown={(e) => {
            if (e.key === 'Enter' || e.key === ' ') {
              e.stopPropagation()
              onRemove()
            }
          }}
          className="hover:text-red-500 transition-colors cursor-pointer"
        >
          <X size={8} />
        </span>
      )}
      {isAI && !isSelected && (
        <span className="relative flex h-1.5 w-1.5">
          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#75B2D6] opacity-75" />
          <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-[#75B2D6]" />
        </span>
      )}
    </button>
  )
}