import Title from "@/components/Title";
import styles from "./styles.module.css";

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

function PointsList({
  points,
  title,
  titleClassName = "",
  containerClassName = "",
}: IPointsListProps) {
  return (
    <div className={`${styles["you-get"]} ${containerClassName}`}>
      <Title variant="h2" className={`${styles.title} ${titleClassName}`}>
        {title}
      </Title>
      <ul>
        {points.map((point, index) => (
          <li key={index}>
            <img src="/check-mark-purple.svg" alt="Check mark" />
            {point}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PointsList;
