import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useCallback } from 'react';
import { promptSuggestionTheme } from './PromptSuggestion.theme.js';
import { cn } from '../../../utils/cn.js';

/**
 * PromptSuggestion - Individual clickable suggestion chip
 *
 * Simple, focused component for AI prompt interfaces.
 * White background with border styling, fully customizable via className.
 *
 * @example Basic usage
 * ```tsx
 * <div className="flex gap-2">
 *   <PromptSuggestion onSelect={handleSelect}>Write a poem</PromptSuggestion>
 *   <PromptSuggestion onSelect={handleSelect}>Summarize document</PromptSuggestion>
 * </div>
 * ```
 *
 * @example With icons
 * ```tsx
 * <PromptSuggestion
 *   icon={<CodeBracketIcon className="size-4" />}
 *   onSelect={handleSelect}
 * >
 *   Explain code
 * </PromptSuggestion>
 * ```
 */
const PromptSuggestion = React__default.forwardRef(({ children, onSelect, icon, className, onClick, ...props }, ref) => {
    const theme = promptSuggestionTheme;
    // Extract text content from children for onSelect callback
    const getTextContent = useCallback(() => {
        if (typeof children === "string") {
            return children;
        }
        if (typeof children === "number") {
            return String(children);
        }
        return "";
    }, [children]);
    // Handle click with onSelect callback
    const handleClick = useCallback((event) => {
        onClick === null || onClick === void 0 ? void 0 : onClick(event);
        if (onSelect) {
            const text = getTextContent();
            if (text) {
                onSelect(text);
            }
        }
    }, [onClick, onSelect, getTextContent]);
    return (jsxs("span", { ref: ref, role: "button", tabIndex: 0, onClick: handleClick, onKeyDown: (e) => {
            if (e.key === "Enter" || e.key === " ") {
                e.preventDefault();
                handleClick(e);
            }
        }, className: cn(theme.baseStyle, className), "aria-label": typeof children === "string" ? `Use suggestion: ${children}` : undefined, ...props, children: [icon && jsx("span", { className: theme.iconStyle, children: icon }), children] }));
});
PromptSuggestion.displayName = "PromptSuggestion";

export { PromptSuggestion };
