/**
 * FilterChip — Removable Petrol-Tint-Pill (DCT Filter-Manager Pattern)
 * Brain DCT-CI 2026-05-22.
 *
 * Brand-Verbesserung: explizites aria-label "Filter X entfernen" fuer Screen-Reader.
 */

import * as React from "react"
import { X } from "lucide-react"
import { cn } from "@/lib/utils"

interface ResolveInput {
  field: string
  value: string | number
}

export function resolveChipKey({ field, value }: ResolveInput): string {
  return `${field}:${value}`
}

interface Props {
  label: string
  onRemove?: () => void
  className?: string
}

export default function FilterChip({ label, onRemove, className }: Props) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 rounded-sm bg-primary-tint text-primary-dark px-2.5 py-1 text-xs font-medium",
        className,
      )}
    >
      <span className="truncate max-w-[200px]">{label}</span>
      {onRemove ? (
        <button
          onClick={onRemove}
          aria-label={`Filter ${label} entfernen`}
          className="shrink-0 hover:bg-primary/10 rounded-sm p-0.5 transition-colors"
        >
          <X size={12} aria-hidden />
        </button>
      ) : null}
    </span>
  )
}