Suggestion chips

import { Button, Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@paxeer/core";

export function SuggestionChips({
  suggestions = [
    "Show the ETH book",
    "Draft a conservative bid",
    "Open helix-exec timeline",
  ],
  onPick,
}: {
  suggestions?: string[];
  onPick?: (value: string) => void;
}) {
  if (suggestions.length === 0) {
    return (
      <Empty className="p-4" data-slot="suggestion-chips">
        <EmptyHeader>
          <EmptyTitle>No suggestions</EmptyTitle>
          <EmptyDescription>The model has not proposed follow-ups.</EmptyDescription>
        </EmptyHeader>
      </Empty>
    );
  }

  return (
    <div data-slot="suggestion-chips" className="flex flex-wrap items-center gap-2">
      {suggestions.map((suggestion) => (
        <Button
          key={suggestion}
          type="button"
          variant="tonal"
          size="dense"
          onClick={() => onPick?.(suggestion)}
        >
          {suggestion}
        </Button>
      ))}
    </div>
  );
}