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

interface IQuestionProps {
  title: string;
  text: string;
}

function Question({ title, text }: IQuestionProps) {
  const { translate } = useTranslations(ELocalesPlacement.V1);

  return (
    <>
      <div className={styles.header}>
        <div className={styles["image-container"]}>
          <img src="/question.svg" alt="Question icon" />
        </div>
        <Title variant="h5" className={styles["secondary-title"]}>
          {translate(title)}
        </Title>
      </div>
      <p className={styles.text}>{translate(text)}</p>
    </>
  );
}

export default Question;
