import { Filter } from 'lucide-react'
import { cn } from '@/lib/utils'

interface FilterChip {
  id: string
  label: string
}

interface FiltersBarProps {
  filters: FilterChip[]
  activeFilter: string
  onFilterChange: (id: string) => void
}

export function FiltersBar({ filters, activeFilter, onFilterChange }: FiltersBarProps) {
  return (
    <div className="fade-in flex items-center gap-1.5 overflow-x-auto py-1" style={{ animationDelay: '100ms' }}>
      {filters.map(f => (
        <button
          key={f.id}
          onClick={() => onFilterChange(f.id)}
          className={cn(
            'shrink-0 rounded-lg border px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
            activeFilter === f.id
              ? 'border-primary/30 bg-primary/10 text-primary'
              : 'border-border bg-card text-muted-foreground hover:border-border/80 hover:text-foreground'
          )}
        >
          {f.label}
        </button>
      ))}
      <div className="mx-1.5 h-5 w-px shrink-0 bg-border" />
      <button className="flex shrink-0 items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-[0.8125rem] text-muted-foreground hover:text-foreground transition-colors">
        <Filter size={14} />
        More Filters
      </button>
    </div>
  )
}
