"use client";

import { useTranslations } from "next-intl";
import clsx from "clsx";

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

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

type IHeaderTimerProps = React.ComponentProps<"div">;

export default function HeaderTimer({ className }: IHeaderTimerProps) {
  const t = useTranslations(
    translatePathEmailMarketingSoulmateV1("Landing.header-timer")
  );
  const { time } = useTimer({
    initialSeconds: 600,
    persist: true,
    storageKey: "email-marketing-v2-timer",
  });

  return (
    <div className={clsx(styles.container, className)}>
      <Typography as="p" color="white" className={styles.title}>
        {t("title", { time })}
      </Typography>
    </div>
  );
}
