"use client";

import { useEffect } from "react";
import Image from "next/image";
import { useTranslations } from "next-intl";

import { Typography } from "@/components/ui";
import { useTimer } from "@/hooks/timer/useTimer";
import { useChatStore } from "@/providers/chat-store-provider";
import { useUser } from "@/providers/user-provider";

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

interface RefillOptionsHeaderProps {
  onTimerLeft?: () => void;
}

export default function RefillOptionsHeader({
  onTimerLeft,
}: RefillOptionsHeaderProps) {
  const t = useTranslations("RefillOptionsModal.header");
  const { time, isFinished } = useTimer({
    initialSeconds: 60,
  });

  const currentChat = useChatStore(state => state.currentChat);
  const { user } = useUser();

  useEffect(() => {
    if (isFinished) {
      onTimerLeft?.();
    }
  }, [isFinished, onTimerLeft]);

  return (
    <div className={styles.container}>
      <Image
        className={styles.avatar}
        src="/test-user-avatar.png"
        alt="User avatar"
        width={48}
        height={48}
      />
      <div className={styles.info}>
        <Typography
          as="h3"
          weight="semiBold"
          align="left"
          className={styles.title}
        >
          {t("title", { name: currentChat?.assistantName || "" })}
        </Typography>
        <Typography as="p" size="sm" align="left" className={styles.subtitle}>
          {t("subtitle", { name: user?.profile?.name || "" })}
        </Typography>
      </div>
      <div className={styles.timer}>
        <Typography weight="bold" color="white" className={styles.timerValue}>
          {time}
        </Typography>
      </div>
    </div>
  );
}
