import Title from "@/components/Title";
import styles from "./styles.module.scss";
import routes from "@/routes";
import BiometricData from "@/components/palmistry/biometric-data/biometric-data";
import { useNavigate } from "react-router-dom";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import ScanInstructionSVG from "@/components/PalmistryV1/images/SVG/ScanInstruction";
import QuestionnaireGreenButton from "../../ui/GreenButton";
import Header from "../../components/Header";

function ScanInstruction() {
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
  const navigate = useNavigate()

  const handleClick = () => {
    navigate(routes.client.cameraV1());
  };

  return (
    <section className={`${styles.page} page`}>
      <Header className={styles.header} />
      <Title variant="h2" className={styles.title}>
        {translate("/scan-instruction.title")}
      </Title>
      <ScanInstructionSVG />
      <QuestionnaireGreenButton className={styles.button} onClick={handleClick}>
        {translate("/scan-instruction.button")}
      </QuestionnaireGreenButton>
      <BiometricData className={styles.biometric} />
    </section>
  );
}

export default ScanInstruction;
