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

import { Item } from "./Item";

interface IconListItem {
  icon: string;
  content: React.ReactNode;
  tooltip?: React.ReactNode;
}

interface IconListProps {
  items?: IconListItem[];
  className?: string;
  [key: string]: any;
}

const CLASS_ROOT = "icon-list";

export const IconList: React.FC<IconListProps> = ({
  items = [],
  className,
  ...other
}) => (
  <ul className={cx(CLASS_ROOT, className)} {...other}>
    {items.map(({ content, ...other }, index) => (
      <Item key={index.toString()} {...other}>
        {content}
      </Item>
    ))}
  </ul>
);

IconList.displayName = "IconList";