suggestions

1"use client";
2 
3import type { ReactNode } from "react";
4import { cn } from "../utils/cn";
5 
6export type SuggestionItem = {
7  id: string;
8  label: string;
9  value?: string;
10  icon?: ReactNode;
11  className?: string;
12};
13 
14export type SuggestionsProps = {
15  items: SuggestionItem[];
16  onSelect: (item: SuggestionItem) => void;
17  disabled?: boolean;
18  className?: string;
19  itemClassName?: string;
20};
21 
22export function Suggestions({
23  items,
24  onSelect,
25  disabled,
26  className,
27  itemClassName,
28}: SuggestionsProps) {
29  if (items.length === 0) {
30    return null;
31  }
32 
33  return (
34    <div className={cn("flex flex-wrap items-center gap-2", className)}>
35      {items.map((item) => (
36        <button
37          key={item.id}
38          type="button"
39          disabled={disabled}
40          onClick={() => onSelect(item)}
41          className={cn(
42            "inline-flex h-7 items-center gap-1 rounded-[6px] border border-border bg-transparent px-2 text-sm text-an-foreground-muted transition-colors hover:bg-an-background-secondary/40 hover:text-an-foreground disabled:opacity-50 disabled:pointer-events-none",
43            itemClassName,
44            item.className,
45          )}
46        >
47          {item.icon && (
48            <span className="inline-flex shrink-0">{item.icon}</span>
49          )}
50          {item.label}
51        </button>
52      ))}
53    </div>
54  );
55}