import { FunctionComponent } from "react";
import styled from "styled-components";

interface IIconListProps {
  icons: string[];
  height?: number;
  width?: number;
  className?: string;
}

const IconListSpan = styled.span`
  display: flex;
  margin-right: 8px;
`;

const Image = styled.img`
  margin-left: ${({ index, width }: {index: number, width: number}) => (index > 0 ? -width / 2 : 0)}px;
  max-height: ${({ height }) => height}px;
  max-width ${({ width }) => width}px;
  border-radius: 50%;
  border: 1px solid #eee;
  background-color: #eee;
`;

export const IconList: FunctionComponent<IIconListProps> = (props) => {
  const { icons, height = 23, width = 23 } = props;

  return (
    <IconListSpan>
      {icons.map((url, index) => (
        <Image height={height} index={index} width={width} key={url + index} src={url} />
      ))}
    </IconListSpan>
  );
};
