'use strict';
import { jsx } from 'react/jsx-runtime';
import { scrollIntoView } from './NavigationItem.funcs.js';
import { FadeOutText } from '../../fade-out-text/FadeOutText.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function NavigationItemComponent({
  navigationItem
}) {
  return /* @__PURE__ */jsx("li", {
    className: "text-fd-accent hover:bg-muted/50 m-2 cursor-pointer truncate px-4 py-2 hover:rounded-md",
    onClick: () => scrollIntoView(navigationItem.targetHtmlElementId),
    children: /* @__PURE__ */jsx(FadeOutText, {
      children: navigationItem.displayName
    })
  });
}
__name(NavigationItemComponent, "NavigationItemComponent");

export { NavigationItemComponent };
