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

/**
 * @file NavIcon.tsx
 * @input Uses React, HTMLAttributes, ReactNode
 * @output Exports NavIcon component and NavIconProps
 * @position Shared circular icon container for navigation headers (TopNav, PageNav)
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/NavIcon/NavIcon.doc.mjs
 * - /packages/core/src/NavIcon/NavIcon.test.tsx
 * - /packages/core/src/NavIcon/index.ts
 * - /apps/storybook/stories/TopNav.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/NavIcon/NavIconShowcase.tsx
 */

import type { ReactNode } from 'react';
import type { BaseProps } from "../BaseProps.js";
import * as stylex from "../style-runtime.js";
import "../theme/tokens.stylex.js";
import { colorVars, sizeVars } from "../theme/tokens.stylex.js";
import { mergeProps } from "../utils/index.js";
import { themeProps } from "../utils/themeProps.js";

/**
 * NavIcon styles
 */
const styles = {
  base: {
    k1xSpc: "x78zum5",
    kGNEyG: "x6s0dn4",
    kjj79g: "xl56j7k",
    kaIpWk: "x16rqkct",
    kWkggS: "x1ewilqj",
    kMwMTN: "x17wrial",
    kmuXW: "x2lah0s",
    kzqmXN: "x805d0l",
    kZKoxP: "x1ueg155",
    $$css: true as const
  }
};
export interface NavIconProps extends BaseProps<HTMLSpanElement> {
  /** Ref forwarded to the root element */
  ref?: React.Ref<HTMLSpanElement>;
  /**
   * The icon element to render inside the circular background.
   * Should be an Icon or similar icon component.
   */
  icon: ReactNode;
}

/**
 * Circular icon container for navigation headers.
 *
 * Wraps an icon with a circular accent-colored background, suitable for
 * use as a logo in top navigation or side navigation title areas.
 *
 * @example
 * ```
 * import {HomeIcon} from '@heroicons/react/24/solid';
 * <TopNavHeading
 *   heading="Dashboard"
 *   logo={<NavIcon icon={<HomeIcon style={{width: 16, height: 16}} />} />}
 * />
 * <PageNavHeader
 *   icon={<NavIcon icon={<HomeIcon style={{width: 16, height: 16}} />} />}
 *   heading="My App"
 * />
 * ```
 */
export function NavIcon({
  icon,
  xstyle,
  className,
  style,
  ref,
  ...props
}: NavIconProps) {
  return <span ref={ref} {...mergeProps(themeProps('nav-icon', undefined, {
    // `navicon` ran the compound name together; keep it emitted so
    // existing themes continue to work.
    legacyNames: ['navicon']
  }), stylex.props(styles.base, xstyle), className, style)} {...props}>
      {icon}
    </span>;
}
NavIcon.displayName = 'NavIcon';