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

function OftenAsk() {
  const { translate } = useTranslations(ELocalesPlacement.V1);

  return (
    <div className={styles["often-ask"]}>
      <Title variant="h2" className={styles.title}>
        {translate("/trial-payment.people_often_ask.title")}
      </Title>
      <ul>
        {questions.map((question, index) => (
          <li key={index}>
            <Question {...question} />
          </li>
        ))}
      </ul>
    </div>
  );
}

export default OftenAsk;
