import { ReactNode } from "react";
import styles from "./styles.module.css";

interface IPointsListProps {
  points: string[];
  title?: ReactNode;
  containerClassName?: string;
}

function PointsList({
  points,
  title,
  containerClassName = "",
}: IPointsListProps) {
  return (
    <div className={`${styles["you-get"]} ${containerClassName}`}>
      {title}
      <ul>
        {points.map((point, index) => (
          <li key={index}>
            <svg
            className={styles.checkIcon}
              width="13"
              height="13"
              viewBox="0 0 13 13"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M11.4375 1.98267L4.83125 11.8465L2 8.14756"
                stroke="#3750A8"
                strokeWidth="2.09203"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>

            {point}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PointsList;
