"use client";

import type { ReactElement } from "react";
import { resolveLabels } from "../labels.js";
import { BORDER, SURFACE, SURFACE_HOVER, TEXT_BODY } from "../theme/tokens.js";
import { FOCUS_RING } from "../theme/focusRing.js";

export interface PromptChipsLabels {
  /** The chip group's accessible name. */
  suggestedPrompts: string;
}

export const defaultPromptChipsLabels: Readonly<Required<PromptChipsLabels>> = Object.freeze({
  suggestedPrompts: "Suggested prompts",
});

export interface PromptChipsProps {
  prompts: ReadonlyArray<string>;
  /** Receives the picked prompt's text; pairs with ChatComposerHandle.setValue. */
  onPick: (text: string) => void;
  labels?: Partial<PromptChipsLabels>;
}

const chipClassName = `cursor-pointer rounded-full border ${BORDER} ${SURFACE} px-4 py-2 text-sm ${TEXT_BODY} transition-colors ${SURFACE_HOVER} ring-offset-2 ${FOCUS_RING}`;

export function PromptChips({ prompts, onPick, labels }: PromptChipsProps): ReactElement | null {
  const resolved = resolveLabels(defaultPromptChipsLabels, labels);

  if (prompts.length === 0) {
    return null;
  }

  return (
    // Explicit role="list": Safari drops a list-style: none ul's list semantics and its accessible name with them.
    <ul
      role="list"
      aria-label={resolved.suggestedPrompts}
      className="flex flex-wrap justify-center gap-2"
    >
      {prompts.map((prompt, index) => (
        <li key={`${index}-${prompt}`}>
          <button type="button" onClick={() => onPick(prompt)} className={chipClassName}>
            {prompt}
          </button>
        </li>
      ))}
    </ul>
  );
}