'use client'

import { X } from 'lucide-react'
import { useTranslations } from 'next-intl'

export interface FilterBadge {
  id: string
  label: string
  type: string
  value?: string
}

interface ActiveFiltersProps {
  filters: FilterBadge[]
  onRemove: (id: string, type: string, value?: string) => void
  onClearAll: () => void
  title?: string
}

export default function ActiveFilters({ filters, onRemove, onClearAll, title: titleProp }: ActiveFiltersProps) {
  const t = useTranslations('Filters')
  const title = titleProp ?? t('activeFilters')
  if (filters.length === 0) return null

  return (
    <div className="flex flex-wrap items-center gap-2 mb-6 pb-4 border-b border-gray-100">
      <span className="text-sm text-gray-custom mr-2">{title}</span>
      
      {filters.map((filter) => (
        <span
          key={filter.id}
          className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary/10 text-primary text-sm rounded-full font-medium"
        >
          {filter.label}
          <button
            onClick={() => onRemove(filter.id, filter.type, filter.value)}
            aria-label={t('removeFilter', { label: filter.label })}
            className="hover:bg-primary/20 rounded-full p-0.5 transition"
          >
            <X size={14} />
          </button>
        </span>
      ))}
      
      <button
        onClick={onClearAll}
        className="ml-2 text-sm text-gray-custom hover:text-primary transition-colors"
      >
        {t('clearAll')}
      </button>
    </div>
  )
}