import Plus from "../Svg/Plus";

interface IAdditionListProps {
  image: JSX.Element;
  text: string;
  callback: () => void;
}

export const AdditionListItem = (props: IAdditionListProps) => {
  return (
    <div className="addition-list-item">
      <div className="addition-list-item-image">{props.image}</div>
      <div className="addition-list-item-text">{props.text}</div>
      <div className="addition-list-item-button">
        <a onClick={props.callback}>
          <Plus />
        </a>
      </div>
    </div>
  );
};

interface IAdditionProps {
  children: IAdditionListProps[];
}

export const AdditionList = (props: IAdditionProps) => {
  return (
    <div className="addition-list">
      {props.children?.map((list) => (
        <AdditionListItem
          image={list.image}
          text={list.text}
          callback={list.callback}
        />
      ))}
    </div>
  );
};
