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

/**
 * @file CommandPaletteFooter.tsx
 * @input Uses React, StyleX, Kbd
 * @output Exports CommandPaletteFooter component
 * @position Sub-component; footer with keyboard hints
 *
 * SYNC: When modified, update:
 * - /packages/cli/assets/templates/blocks/components/CommandPalette/ (showcase blocks)
 */

'use client';

import type { ReactNode } from 'react';
import * as stylex from "../style-runtime.js";
import type { BaseProps } from "../BaseProps.js";
import { mergeProps } from "../utils/index.js";
import "../theme/tokens.stylex.js";
import { colorVars, spacingVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
import { Kbd } from "../Kbd/index.js";
import { themeProps } from "../utils/themeProps.js";
import { useTranslator } from "../i18n/index.js";
const styles = {
  footer: {
    k1xSpc: "x78zum5",
    kGNEyG: "x6s0dn4",
    kOIVth: "x18g69wz",
    kg3NbH: "x1pzlopt",
    k8WAf4: "xce4md1",
    kmuXW: "x2lah0s",
    kMv6JI: "x9ynric",
    kGuDYH: "x141an7d",
    kLWn49: "x1ltkj2j",
    kMwMTN: "xv1l7n4",
    $$css: true as const
  }
};
export interface CommandPaletteFooterProps extends BaseProps<HTMLDivElement> {
  /** Ref forwarded to the footer element. */
  ref?: React.Ref<HTMLDivElement>;

  /**
   * Footer content. When provided, renders custom content instead of default hints.
   * Custom children inherit the footer font treatment (supporting/12px, secondary color).
   * When omitted, renders default keyboard navigation hints using Kbd.
   */
  children?: ReactNode;
}

/**
 * Footer for the command palette showing keyboard navigation hints.
 *
 * When no children are provided, renders default hints using Kbd
 * for arrow keys, Enter to select, and Escape to close.
 *
 * @compositionHint Pass to CommandPalette's `footer` slot.
 *
 * @example
 * ```
 * <CommandPalette
 *   isOpen={isOpen}
 *   onOpenChange={setIsOpen}
 *   input={<CommandPaletteInput />}
 *   footer={<CommandPaletteFooter />}>
 *   <CommandPaletteList>...</CommandPaletteList>
 * </CommandPalette>
 * ```
 */
export function CommandPaletteFooter({
  children,
  ref,
  xstyle,
  className,
  style,
  ...props
}: CommandPaletteFooterProps) {
  const t = useTranslator();
  return <div ref={ref} {...mergeProps(themeProps('command-palette-footer'), stylex.props(styles.footer, xstyle), className, style)} {...props}>
      {children ?? <>
          <span className="x78zum5 x6s0dn4 xzye2dw">
            <Kbd keys="up" />
            <Kbd keys="down" />
            {t('@astryx.commandPalette.footer.navigate')}
          </span>
          <span className="x78zum5 x6s0dn4 xzye2dw">
            <Kbd keys="enter" />
            {t('@astryx.commandPalette.footer.select')}
          </span>
          <span className="x78zum5 x6s0dn4 xzye2dw">
            <Kbd keys="escape" />
            {t('@astryx.commandPalette.footer.close')}
          </span>
        </>}
    </div>;
}
CommandPaletteFooter.displayName = 'CommandPaletteFooter';