import type { ReactNode, RefAttributes } from "react";
import classNames from "classnames/dedupe";
import type { DOMProps } from "../../types/dom";

export type ListItemElementType = HTMLLIElement;
export interface ListItemProps
  extends DOMProps, RefAttributes<ListItemElementType> {
  children?: ReactNode;
  value?: number;
  className?: string;
  parentIcon?: ReactNode;
  icon?: ReactNode;
}

const ListItem = ({ ref, ...props }: ListItemProps) => {
  const { parentIcon, icon, children, ...otherProps } = props;
  const iconContent = icon || parentIcon;
  const classes = classNames(
    "mobius",
    "mobius-list__item",
    {
      "--has-icon": iconContent,
    },
    props.className,
  );
  const contentClasses = classNames("mobius", "mobius-list__item-content");
  const iconClasses = classNames("mobius", "mobius-list__icon");

  if (iconContent) {
    return (
      <li ref={ref} {...otherProps} className={classes}>
        <span className={contentClasses}>
          <span className={iconClasses}>{iconContent}</span>
          {children}
        </span>
      </li>
    );
  }

  return (
    <li ref={ref} {...otherProps} className={classes}>
      {children}
    </li>
  );
};

ListItem.displayName = "ListItem";
export { ListItem };
