import clsx from 'clsx';
import Link from 'next/link';
import { Show } from '../../00-base';
const styleMap = clsx('w-full cursor-pointer px-4 py-2 transition hover:bg-black hover:text-white');
/**
 * AvatarItem component for rendering an item in the Avatar dropdown list.
 *
 * @component
 * @example
 * // Example usage of AvatarItem component
 * <AvatarItem
 *   text="Profile"
 *   href="/profile"
 *   icon={<ProfileIcon />}
 *   className="custom-class"
 *   onClick={() => console.log('Profile clicked')}
 * />
 *
 * @param {TAvatarList} props - The properties of the AvatarItem component.
 * @param {string} props.text - The text to be displayed for the item.
 * @param {ReactNode} [props.icon] - Optional icon to be displayed alongside the text.
 * @param {string} [props.className] - Optional additional class names for the item.
 * @param {string} [props.href] - Optional URL to navigate to when the item is clicked.
 * @param {function} [props.onClick] - Optional click handler for the item.
 *
 * @returns {ReactNode} The rendered AvatarItem component.
 */
export function AvatarItem({ text, icon, className, href, onClick, }) {
    return (<Show>
      <Show.When isTrue={Boolean(href)}>
        <Link href={href} className={clsx(styleMap, className)}>
          <ContentItem text={text} icon={icon}/>
        </Link>
      </Show.When>
      <Show.Else>
        <button onClick={onClick} className={clsx(styleMap, className)}>
          <ContentItem text={text} icon={icon}/>
        </button>
      </Show.Else>
    </Show>);
}
/**
 * ContentItem component for rendering the content of an AvatarItem.
 *
 * @component
 * @example
 * // Example usage of ContentItem component
 * <ContentItem
 *   text="Profile"
 *   icon={<ProfileIcon />}
 * />
 *
 * @param {Object} props - The properties of the ContentItem component.
 * @param {string} props.text - The text to be displayed for the item.
 * @param {ReactNode} [props.icon] - Optional icon to be displayed alongside the text.
 *
 * @returns {ReactNode} The rendered ContentItem component.
 */
function ContentItem({ text, icon, }) {
    return (<span className="flex items-center text-left">
      {!!icon && <span className="pr-1">{icon}</span>}
      <span>{text}</span>
    </span>);
}
//# sourceMappingURL=AvatarItem.jsx.map