import { ListItemProps } from "antd/lib/list/Item";
import React from "react";
import { StyledList } from "./List.styled";
import { ListProps } from "./types";

const List: React.FC<ListProps> = props => {
  const { dataSource, type } = props;
  return (
    <StyledList
      type={type}
      dataSource={dataSource}
      renderItem={(item: unknown | ListItemProps, index: number) => {
        if (type === "ul") {
          return <li>{item as string}</li>;
        } else if (type === "ol") {
          return (
            <li>
              {index + 1}. {item as string}
            </li>
          );
        }
        return <li>{item as string}</li>;
      }}
    />
  );
};

export default List;