import cx from "classnames";
import React from "react";

import ConditionalWrapper from "../../utils/ConditionalWrapper";
import { ClickableControl } from "./ClickableControl";

interface ControlProps {
  href?: string;
  className?: string;
  children?: React.ReactNode;
  [key: string]: any;
}

interface ListItemProps {
  /** Item with control props automatically creates a clickable item and renders an interactive element. If the object contains a href property, it renders an anchor element. If not, it renders a button of type="button" instead. */
  controlProps?: ControlProps;
  className?: string;
  children?: React.ReactNode;
  [key: string]: any;
}

const CLASS_ROOT = "list__item";

export const ListItem: React.FC<ListItemProps> = ({
  controlProps,
  className,
  children,
  ...other
}) => {
  const classes = cx(CLASS_ROOT, className);

  return (
    <li className={classes} {...other}>
      <ConditionalWrapper
        condition={controlProps !== undefined}
        wrapper={<ClickableControl {...controlProps} />}
      >
        {children}
      </ConditionalWrapper>
    </li>
  );
};

ListItem.displayName = "ListItem";