"use client"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { X } from "lucide-react"

interface Vertical {
    slug: string
    name: string
}

interface FilterPillsProps {
    selectedBands: string[]
    verticals: Vertical[]
    onRemove: (slug: string) => void
    onClear: () => void
}

export function FilterPills({ selectedBands, verticals, onRemove, onClear }: FilterPillsProps) {
    if (selectedBands.length === 0) return null

    return (
        <div className="flex flex-wrap items-center gap-2 mb-4">
            <span className="text-sm text-muted-foreground mr-2">Filtering by:</span>
            {selectedBands.map(slug => {
                const band = verticals.find(v => v.slug === slug)
                return (
                    <Badge key={slug} variant="secondary" className="flex items-center gap-1 pl-2 pr-1 py-1">
                        {band?.name || slug}
                        <Button
                            variant="ghost"
                            size="icon"
                            className="h-4 w-4 ml-1 hover:bg-transparent hover:text-destructive"
                            onClick={() => onRemove(slug)}
                        >
                            <X className="h-3 w-3" />
                        </Button>
                    </Badge>
                )
            })}
            <Button
                variant="ghost"
                size="sm"
                className="text-xs text-muted-foreground hover:text-foreground h-7"
                onClick={onClear}
            >
                Clear all
            </Button>
        </div>
    )
}
