import Title from "@/components/Title";
import styles from "./styles.module.css";
import MainButton from "@/components/MainButton";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

interface ILoadingProfileModalChildProps {
  title: string;
  handleClick: () => void;
}

function LoadingProfileModalChild({
  title,
  handleClick,
}: ILoadingProfileModalChildProps) {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  return (
    <div className={styles.modal}>
      <img
        className={styles["question-img"]}
        src="/questionV1.webp"
        alt="Question"
      />
      <Title className={styles.title} variant="h4">
        {title}
      </Title>
      <div className={styles["buttons-container"]}>
        <MainButton className={styles.button} onClick={handleClick}>
          {translate(`no`)}
        </MainButton>
        <MainButton className={styles.button} onClick={handleClick}>
          {translate(`yes`)}
        </MainButton>
      </div>
    </div>
  );
}

export default LoadingProfileModalChild;
