// Copyright (c) Meta Platforms, Inc. and affiliates.

/**
 * @file CommandPaletteEmpty.tsx
 * @input Uses React, StyleX
 * @output Exports CommandPaletteEmpty component
 * @position Sub-component; empty state shown when there are no items to display
 *
 * SYNC: When modified, update:
 * - /packages/cli/assets/templates/blocks/components/CommandPalette/ (showcase blocks)
 */

'use client';

import React, { type ReactNode } from 'react';
import * as stylex from "../style-runtime.js";
import "../theme/tokens.stylex.js";
import { colorVars, spacingVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
import { mergeProps } from "../utils/index.js";
import type { BaseProps } from "../BaseProps.js";
import { themeProps } from "../utils/themeProps.js";
const styles = {
  empty: {
    k1xSpc: "x78zum5",
    kGNEyG: "x6s0dn4",
    kjj79g: "xl56j7k",
    k8WAf4: "xmfvnks",
    kg3NbH: "x1pzlopt",
    kMv6JI: "x9ynric",
    kGuDYH: "x141an7d",
    kLWn49: "x1ltkj2j",
    kMwMTN: "xv1l7n4",
    k9WMMc: "x2b8uid",
    $$css: true as const
  }
};
export interface CommandPaletteEmptyProps extends BaseProps<HTMLDivElement> {
  ref?: React.Ref<HTMLDivElement>;
  /** The message or content to display. */
  children: ReactNode;
}

/**
 * Empty state for the command palette list area.
 *
 * Rendered automatically by CommandPalette in two situations:
 * - `emptyBootstrapText`: no search term and bootstrap() returns nothing
 * - `emptySearchText`: a search query returned no results
 *
 * Can also be composed manually inside a custom render function.
 *
 * @example
 * ```
 * <CommandPalette
 *   emptyBootstrapText={<CommandPaletteEmpty>Start typing to search</CommandPaletteEmpty>}
 *   emptySearchText={<CommandPaletteEmpty>No results found</CommandPaletteEmpty>}
 *   searchSource={source}
 * />
 * ```
 */
export function CommandPaletteEmpty({
  ref,
  children,
  xstyle,
  className,
  style,
  ...props
}: CommandPaletteEmptyProps) {
  return <div ref={ref} {...mergeProps(themeProps('command-palette-empty'), stylex.props(styles.empty, xstyle), className, style)} {...props}>
      {children}
    </div>;
}
CommandPaletteEmpty.displayName = 'CommandPaletteEmpty';