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

/**
 * @file Code.tsx
 * @input Uses React, StyleX, theme tokens
 * @output Exports Code component for inline code styling
 * @position Core implementation; lives in own Code/ dir, re-exported by CodeBlock/
 *
 * SYNC: When modified, update:
 * - /packages/core/src/CodeBlock/index.ts (exports if types change)
 * - /packages/cli/assets/templates/blocks/components/Code/ (showcase blocks)
 * - /packages/cli/assets/templates/blocks/components/CodeBlock/ (showcase blocks)
 */

import type { ReactNode } from 'react';
import * as stylex from "../style-runtime.js";
import "../theme/tokens.stylex.js";
import { colorVars, spacingVars, radiusVars, typographyVars, typeScaleVars } 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 = {
  base: {
    kMv6JI: "x9m5x89",
    kGuDYH: "xp03k98",
    kLWn49: "x15bjb6t",
    kWkggS: "xwmxj5m",
    kg3NbH: "x7a5moj",
    k8WAf4: "x1hp7d8q",
    kaIpWk: "xx3sua9",
    kHjlTd: "x1mzt3pk",
    kTgw9: "x13faqbe",
    $$css: true as const
  }
};
const colorStyles = {
  primary: {
    kMwMTN: "x1tgivj0",
    $$css: true as const
  },
  secondary: {
    kMwMTN: "xv1l7n4",
    $$css: true as const
  },
  inherit: {
    kMwMTN: "x1heor9g",
    $$css: true as const
  }
};
const sizeStyles = {
  inherit: {
    kGuDYH: "x1qlqyl8",
    kLWn49: "x15bjb6t",
    $$css: true as const
  }
};

/** Text color for {@link Code}, mirroring the primary/secondary/inherit subset of Text. */
export type CodeColor = 'primary' | 'secondary' | 'inherit';

/** Font size for {@link Code}. `'inherit'` adopts the surrounding text size. */
export type CodeSize = 'inherit';
export interface CodeProps extends BaseProps<HTMLElement> {
  /** Ref forwarded to the root element */
  ref?: React.Ref<HTMLElement>;
  /**
   * Text color. Mirrors the Text color subset.
   * @default 'primary'
   */
  color?: CodeColor;
  /**
   * Font size. Set to `'inherit'` to adopt the surrounding text's font-size
   * and line-height (useful for inline code inside larger/smaller text).
   */
  size?: CodeSize;
  /** Code content */
  children: ReactNode;
}

/**
 * Inline code element. Renders a styled `<code>` with monospace font,
 * muted background, and design-system-consistent sizing.
 *
 * For fenced code blocks with syntax highlighting, use `CodeBlock`.
 *
 * @example
 * ```
 * <Text type="body">
 *   Use <Code>const x = 1</Code> to declare a variable.
 * </Text>
 * ```
 */
export function Code({
  children,
  color = 'primary',
  size,
  xstyle,
  className,
  style,
  ref,
  ...props
}: CodeProps) {
  return <code ref={ref} {...props} {...mergeProps(themeProps('code', {
    color
  }), stylex.props(styles.base, colorStyles[color], size && sizeStyles[size], xstyle), className, style)}>
      {children}
    </code>;
}
Code.displayName = 'Code';