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

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

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

export default async function RealTimeActivity() {
  const t = await getTranslations(
    translatePathEmailMarketingSoulmateV1("Landing.real-time-activity")
  );

  return (
    <div className={styles.container}>
      <Typography as="h4" align="left" className={styles.title}>
        <div className={styles.indicator} />
        {t("title")}
      </Typography>
      <div className={styles.content}>
        <UserAvatar
          src={emailMarketingCompV2Images("real-time-activity/avatar.jpg")}
          alt="avatar"
          size="sm"
        />
        <Typography as="p" align="left" className={styles.text}>
          {t.rich("text", {
            bold: chunks => <b>{chunks}</b>,
          })}
        </Typography>
        <Typography className={styles.time}>{t("time")}</Typography>
      </div>
    </div>
  );
}
