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

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

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

const avatarsUrl = Array.from({ length: 6 }, (_, i) =>
  emailMarketingCompV2Images(`statistics/avatar${i + 1}.png`)
);

export default async function Statistics() {
  const t = await getTranslations(
    translatePathEmailMarketingSoulmateV1("Landing.statistics")
  );

  return (
    <div className={styles.container}>
      <Typography as="h2" className={styles.title}>
        {t("title")}
      </Typography>
      <Typography as="p" className={styles.description}>
        {t("description")}
      </Typography>
      <div className={styles.avatars}>
        {avatarsUrl.map((url, index) => (
          <Image
            key={`avatar-${index}`}
            src={url}
            alt={`avatar-${index}`}
            width={48}
            height={48}
            className={styles.avatar}
          />
        ))}
        <div className={styles.more}>
          <Typography className={styles.moreText} color="white">
            {t("more-avatars")}
          </Typography>
        </div>
      </div>
      <div className={styles.periodStatistics}>
        <div className={styles.monthContainer}>
          <div className={styles.iconContainer}>
            <svg
              width="20"
              height="18"
              viewBox="0 0 20 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M1.85938 10.0879L8.91797 16.6777C9.21094 16.9511 9.59766 17.1035 10 17.1035C10.4023 17.1035 10.7891 16.9511 11.082 16.6777L18.1406 10.0879C19.3281 8.98239 20 7.43161 20 5.81051V5.58395C20 2.85348 18.0273 0.525356 15.3359 0.0761369C13.5547 -0.220738 11.7422 0.361293 10.4688 1.63473L10 2.10348L9.53125 1.63473C8.25781 0.361293 6.44531 -0.220738 4.66406 0.0761369C1.97266 0.525356 0 2.85348 0 5.58395V5.81051C0 7.43161 0.671875 8.98239 1.85938 10.0879Z"
                fill="#EC4899"
              />
            </svg>
          </div>
          <Typography as="h4" className={styles.title}>
            {t("period-statistics.month.title")}
          </Typography>
          <Typography as="p" className={styles.description}>
            {t("period-statistics.month.text")}
          </Typography>
        </div>
        <div className={styles.todayContainer}>
          <div className={styles.iconContainer}>
            <svg
              width="16"
              height="18"
              viewBox="0 0 16 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M4.57143 0C5.20357 0 5.71429 0.502734 5.71429 1.125V2.25H10.2857V1.125C10.2857 0.502734 10.7964 0 11.4286 0C12.0607 0 12.5714 0.502734 12.5714 1.125V2.25H14.2857C15.2321 2.25 16 3.00586 16 3.9375V5.625H0V3.9375C0 3.00586 0.767857 2.25 1.71429 2.25H3.42857V1.125C3.42857 0.502734 3.93929 0 4.57143 0ZM0 6.75H16V16.3125C16 17.2441 15.2321 18 14.2857 18H1.71429C0.767857 18 0 17.2441 0 16.3125V6.75ZM2.85714 9C2.54286 9 2.28571 9.25313 2.28571 9.5625V12.9375C2.28571 13.2469 2.54286 13.5 2.85714 13.5H6.28571C6.6 13.5 6.85714 13.2469 6.85714 12.9375V9.5625C6.85714 9.25313 6.6 9 6.28571 9H2.85714Z"
                fill="#8C5EB4"
              />
            </svg>
          </div>
          <Typography as="h4" className={styles.title}>
            {t("period-statistics.today.title")}
          </Typography>
          <Typography as="p" className={styles.description}>
            {t("period-statistics.today.text")}
          </Typography>
        </div>
      </div>
    </div>
  );
}
