pangolin/src/components/ColumnFilterButton.tsx

import { useState } from "react";
import { Button } from "@app/components/ui/button";
import {
    Popover,
    PopoverContent,
    PopoverTrigger
} from "@app/components/ui/popover";
import {
    Command,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList
} from "@app/components/ui/command";
import { CheckIcon, ChevronDownIcon, Funnel } from "lucide-react";
import { cn } from "@app/lib/cn";
import { Badge } from "./ui/badge";

interface FilterOption {
    value: string;
    label: string;
}

interface ColumnFilterButtonProps {
    options: FilterOption[];
    selectedValue?: string;
    onValueChange: (value: string | undefined) => void;
    placeholder?: string;
    searchPlaceholder?: string;
    emptyMessage?: string;
    className?: string;
    label: string;
}

export function ColumnFilterButton({
    options,
    selectedValue,
    onValueChange,
    placeholder,
    searchPlaceholder = "Search...",
    emptyMessage = "No options found",
    className,
    label
}: ColumnFilterButtonProps) {
    const [open, setOpen] = useState(false);

    const selectedOption = options.find(
        (option) => option.value === selectedValue
    );

    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <Button
                    variant="ghost"
                    role="combobox"
                    aria-expanded={open}
                    className={cn(
                        "justify-between text-sm h-8 px-2",
                        !selectedValue && "text-muted-foreground",
                        className
                    )}
                >
                    <div className="flex items-center gap-2">
                        {label}

                        <Funnel className="size-4 flex-none" />

                        {selectedOption && (
                            <Badge className="truncate" variant="secondary">
                                {selectedOption.label}
                            </Badge>
                        )}
                    </div>
                </Button>
            </PopoverTrigger>
            <PopoverContent className="p-0 w-50" align="start">
                <Command>
                    <CommandInput placeholder={searchPlaceholder} />
                    <CommandList>
                        <CommandEmpty>{emptyMessage}</CommandEmpty>
                        <CommandGroup>
                            {/* Clear filter option */}
                            {selectedValue && (
                                <CommandItem
                                    onSelect={() => {
                                        onValueChange(undefined);
                                        setOpen(false);
                                    }}
                                    className="text-muted-foreground"
                                >
                                    Clear filter
                                </CommandItem>
                            )}
                            {options.map((option) => (
                                <CommandItem
                                    key={option.value}
                                    value={option.label}
                                    onSelect={() => {
                                        onValueChange(
                                            selectedValue === option.value
                                                ? undefined
                                                : option.value
                                        );
                                        setOpen(false);
                                    }}
                                >
                                    <CheckIcon
                                        className={cn(
                                            "mr-2 h-4 w-4",
                                            selectedValue === option.value
                                                ? "opacity-100"
                                                : "opacity-0"
                                        )}
                                    />
                                    {option.label}
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    </CommandList>
                </Command>
            </PopoverContent>
        </Popover>
    );
}