'use client';
import clsx from 'clsx';
import Link from 'next/link';
import { FaChevronDown } from 'react-icons/fa';
import { Show } from '../../00-base';
import { Paragraph } from '../../01-atoms';
/**
 * MenuItem component for rendering a navigation menu item with optional toggle functionality.
 *
 * @component
 * @example
 * // Example usage of MenuItem component
 * <MenuItem
 *   text="Home"
 *   path="/home"
 *   toggle={true}
 *   onClickToggle={() => console.log('Toggle clicked')}
 *   icon={<SomeIcon />}
 *   isActive={true}
 * />
 *
 * @param {Object} props - The properties of the MenuItem component.
 * @param {string} props.text - The text to display for the menu item.
 * @param {string} props.path - The URL path the menu item links to.
 * @param {boolean} props.toggle - Whether the menu item has a toggle functionality.
 * @param {Function} props.onClickToggle - Callback function triggered when the toggle is clicked.
 * @param {ReactNode} [props.icon] - Optional icon to display alongside the menu item text.
 * @param {boolean} [props.isActive] - Whether the menu item is currently active.
 *
 * @returns {ReactNode} The rendered MenuItem component.
 */
export function MenuItem({ text, path, toggle, onClickToggle, icon, isActive, target, level = 1, isOpen = false, }) {
    const linkStyleMap = clsx('link relative flex w-full cursor-pointer items-center justify-between gap-2', level === 1 && 'h-14 pl-12', level === 2 && 'h-10 pl-12', level >= 3 && 'text-gray-1 h-10 pl-16', 'hover:bg-gray-6 hover:text-lavender', level === 1 && isOpen && 'bg-gray-6 text-lavender', isActive &&
        'before:bg-lavender before:absolute before:-bottom-2.5 before:left-0 before:block before:h-0.5 before:w-full');
    const handleToggleClick = (event) => {
        event.preventDefault();
        event.stopPropagation();
        onClickToggle();
    };
    const isLink = Boolean(path) && !toggle;
    return (<Show>
      <Show.When isTrue={isLink}>
        <Link href={path} className={clsx('slide-over__close', linkStyleMap)} target={target ?? '_self'}>
          <MenuItemContent text={text} icon={icon} toggle={toggle} handleToggleClick={handleToggleClick} level={level}/>
        </Link>
      </Show.When>
      <Show.Else>
        <span className={linkStyleMap} onClick={handleToggleClick}>
          <MenuItemContent text={text} icon={icon} toggle={toggle} handleToggleClick={handleToggleClick} level={level}/>
        </span>
      </Show.Else>
    </Show>);
}
function MenuItemContent({ text, icon, toggle, handleToggleClick, level, }) {
    return (<>
      {level === 1 && !!icon && <span className="icon">{icon}</span>}
      <Paragraph size={level >= 3 ? 'body-2' : 'body-1'}>{text}</Paragraph>
      {!!toggle && (<span onClick={handleToggleClick} className="toggle cursor-pointer p-2 transition-transform duration-500">
          <FaChevronDown size={level >= 3 ? 12 : 16}/>
        </span>)}
    </>);
}
//# sourceMappingURL=MenuItem.jsx.map