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

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

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

export default async function GuideCard() {
  const t = await getTranslations(
    translatePathEmailMarketingSoulmateV1("Landing.what-get.guide")
  );

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

  return (
    <div className={styles.card}>
      <div className={styles.header}>
        <div className={styles["icon-container"]}>
          <svg
            width="24"
            height="22"
            viewBox="0 0 24 22"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2.23125 13.081L10.7016 20.9888C11.0531 21.317 11.5172 21.4998 12 21.4998C12.4828 21.4998 12.9469 21.317 13.2984 20.9888L21.7687 13.081C23.1938 11.7545 24 9.89351 24 7.9482V7.67633C24 4.39976 21.6328 1.60601 18.4031 1.06695C16.2656 0.7107 14.0906 1.40914 12.5625 2.93726L12 3.49976L11.4375 2.93726C9.90938 1.40914 7.73438 0.7107 5.59688 1.06695C2.36719 1.60601 0 4.39976 0 7.67633V7.9482C0 9.89351 0.80625 11.7545 2.23125 13.081Z"
              fill="#F472B6"
            />
          </svg>
        </div>
        <Typography as="p" align="left" color="white" className={styles.title}>
          {t("header.title")}
        </Typography>
      </div>
      <div className={styles["list-container"]}>
        {listItems.map((item, index) => (
          <div className={styles.item} key={`list-${index}`}>
            <div className={styles.number}>{index + 1}</div>
            <Typography
              as="p"
              color="white"
              align="left"
              className={styles["item-text"]}
            >
              {item}
            </Typography>
          </div>
        ))}
      </div>
      <BlurComponent
        className={styles.blur}
        gradientClassName={styles["blur-gradient"]}
        isActiveBlur
      />
    </div>
  );
}
