'use client';

import {HStack} from '@astryxdesign/core/Layout';
import {SUGGESTIONS} from '@/features/loyaly-ai/utils/suggestions';

/**
 * The opening moves, as a wrapped row of chips.
 *
 * Chips rather than the stacked button list this replaces: six full-width
 * secondary buttons read as a menu of commands, which is what made the old
 * panel feel like a dashboard. A wrapped row of quiet pills reads as
 * suggestions — the same distinction ChatGPT, Claude and Gemini all make.
 *
 * Hand-built rather than Astryx's Token: Token is a data chip with a
 * dismiss/selected vocabulary that does not apply here, and Button carries a
 * control's weight. What is wanted is a quiet, fully-rounded, tappable label —
 * three token-backed utilities, and no component contract to fight.
 */
const CHIP = [
  'rounded-full border border-border bg-card',
  'px-3.5 py-2 text-sm text-secondary text-left',
  'transition-colors duration-150 cursor-pointer',
  'hover:bg-muted hover:text-primary hover:border-border-strong',
  'focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2',
].join(' ');

export function SuggestionChips({onPick}: {onPick: (prompt: string) => void}) {
  return (
    <HStack gap={2} wrap="wrap" hAlign="center">
      {SUGGESTIONS.map((s) => (
        <button
          key={s.id}
          type="button"
          className={CHIP}
          onClick={() => onPick(s.prompt)}
        >
          {s.label}
        </button>
      ))}
    </HStack>
  );
}