import { getTranslations } from "next-intl/server";

import { Typography } from "@/components/ui";
import { translatePathEmailMarketingSoulmateV1 } from "@/shared/constants/translate";

import styles from "./PlanAlsoIncludes.module.scss";

interface IListItem {
  title: string;
  text: string;
}

export default async function PlanAlsoIncludes() {
  const t = await getTranslations(
    translatePathEmailMarketingSoulmateV1("Landing.plan-also-includes")
  );

  const listItems = Object.values(
    t.raw("list.items") as Record<string, IListItem>
  );

  return (
    <div className={styles.container}>
      <Typography as="h2" align="left" className={styles.title}>
        {t("title")}
      </Typography>
      <ul className={styles.list}>
        {listItems.map((item, index) => (
          <li key={`item-${index}`} className={styles.item}>
            <svg
              width="13"
              height="9"
              viewBox="0 0 13 9"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M11.9931 0.256348C12.3349 0.598145 12.3349 1.15322 11.9931 1.49502L4.99307 8.49502C4.65127 8.83682 4.09619 8.83682 3.75439 8.49502L0.254395 4.99502C-0.0874023 4.65322 -0.0874023 4.09814 0.254395 3.75635C0.596191 3.41455 1.15127 3.41455 1.49307 3.75635L4.3751 6.63564L10.7571 0.256348C11.0989 -0.0854492 11.654 -0.0854492 11.9958 0.256348H11.9931Z"
                fill="#10B981"
              />
            </svg>
            <div className={styles.textContainer}>
              <Typography align="left" as="p" className={styles.title}>
                {item.title}
              </Typography>
              <Typography align="left" as="p" className={styles.text}>
                {item.text}
              </Typography>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}
