import Button from "../button/button";
import BiometricData from "../biometric-data/biometric-data";
import useSteps from "../../../hooks/palmistry/use-steps";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

export default function StepScanInfo() {
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV0);
  const steps = useSteps();

  const onNext = () => {
    steps.goNext();
  };

  return (
    <>
      <svg
        version="1.1"
        id="Layer_1"
        xmlns="http://www.w3.org/2000/svg"
        width="201"
        height="200"
        x="200"
        y="200"
        enableBackground="new 0 0 201 200"
        xmlSpace="preserve"
      >
        <defs>
          <path id="SVGID_1_" d="M.5 0h200v200H.5z"></path>
        </defs>
        <clipPath id="SVGID_00000063599037366629822520000002470084699890516397_">
          <use xlinkHref="#SVGID_1_" overflow="visible"></use>
        </clipPath>
        <g clipPath="url(#SVGID_00000063599037366629822520000002470084699890516397_)">
          <path fill="transparent" d="M.5 0h200v200H.5z"></path>
          <linearGradient
            id="SVGID_00000067238656879815263510000016374417917591180681_"
            gradientUnits="userSpaceOnUse"
            x1="100.5"
            y1="202"
            x2="100.5"
            y2="57.46"
            gradientTransform="matrix(1 0 0 -1 0 202)"
          >
            <stop offset=".15" stopColor="#fff" stopOpacity="0"></stop>
            <stop offset="1" stopColor="#dee5f8"></stop>
          </linearGradient>
          <path
            fill="url(#SVGID_00000067238656879815263510000016374417917591180681_)"
            d="M200.5 0H.5v144.5h200V0z"
          ></path>
          <path
            fill="#ffffff"
            d="M45.2 147c1.4 29.4 25.5 53 54.9 53s53.5-23.5 54.9-53H45.2zM155.4 144.5V85.2c0-4.4-3.4-7.5-8.3-7.6-4.1-.1-7.8 1.5-10.9 4.5-.7.7-1.3 1.4-1.9 2.2v-45c0-7.2-5.9-13.1-13.1-13.1-3 0-5.8 1-8 2.8v-.1c0-7.2-5.9-13.1-13.1-13.1-7.2 0-13.1 5.9-13.1 13.1v.1c-2.2-1.7-5-2.8-8-2.8-7.2 0-13.1 5.8-13.1 13.1v15c-2.2-1.7-5-2.8-8-2.8-7.2 0-13.1 5.8-13.1 13.1v80h110.6v-.1zM21.4 89.9c-.3 4.3-3.7 7.8-8 8.1-.4 0-.6.3-.6.7v.5c0 .3.3.6.6.7 4.3.2 7.7 3.7 8 8 0 .3.3.7.7.7h.4c.4 0 .7-.3.7-.6.4-3.8 4.3-7.7 8-8 .3 0 .6-.3.6-.6v-.6c0-.3-.2-.6-.5-.6-3.8-.3-7.8-4.2-8.1-8 0-.3-.3-.6-.6-.6h-.5c-.4-.3-.7 0-.7.3z"
          ></path>
          <path
            fill="#dee5f8"
            d="M167.6 26.9c-.4 5.9-5.3 10.8-11.3 11.1-.5 0-.9.4-.9.9v.6c0 .5.4.9.9.9 6 .3 10.9 5.1 11.3 11 0 .5.5.9 1 .9h.5c.5 0 .9-.4 1-.9.6-5.2 6-10.6 11.4-11 .5 0 .8-.4.8-.8v-.8c0-.4-.3-.8-.8-.8-5.4-.5-11-5.8-11.4-11 0-.4-.4-.8-.9-.8h-.8c-.4-.1-.7.3-.8.7zM49.9 64.5c0-4.4 3.6-8 8-8s8 3.6 8 8v38.3c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5V39.2c0-4.4 3.6-8 8-8s8 3.6 8 8v63.6c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5V28.9c0-4.4 3.6-8 8-8s8 3.6 8 8v74c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5V39.3c0-4.4 3.6-8 8-8s8 3.6 8 8v59.1c0 .2 0 .3.1.5 0 .5-.1 1.1-.1 1.6v27.4c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5v-27.4c0-5.7 2.1-11.5 5.4-14.7 2.1-2.1 4.5-3 7.3-3 1.3 0 3.3.4 3.3 2.6v36.2c0 .3.1.5.1.7h-.1V147h5.1V85.2c0-4.4-3.4-7.5-8.3-7.6-4.1-.1-7.8 1.5-10.9 4.5-.7.7-1.3 1.4-1.9 2.2v-45c0-7.2-5.9-13.1-13.1-13.1-3 0-5.8 1-8 2.8v-.1c0-7.2-5.9-13.1-13.1-13.1-7.2 0-13.1 5.9-13.1 13.1v.1c-2.2-1.7-5-2.8-8-2.8-7.2 0-13.1 5.8-13.1 13.1v15c-2.2-1.7-5-2.8-8-2.8-7.2 0-13.1 5.8-13.1 13.1V147H50l-.1-82.5zM100.1 194.9c-26.7 0-48.5-21.2-49.9-47.9h-5c1.4 29.4 25.5 53 54.9 53s53.5-23.5 54.9-53h-5c-1.4 26.7-23.2 47.9-49.9 47.9z"
          ></path>
          <path
            d="M200.5 144.5c0-1.4-1.4-2.5-3.1-2.5H3.6c-1.7 0-3.1 1.1-3.1 2.5s1.4 2.5 3.1 2.5h193.9c1.6 0 3-1.1 3-2.5z"
            fill="#6B7BAA"
          ></path>
          <path
            fill="#ffffff"
            d="M178.2 105.8h-.5c-.3 0-.6.2-.6.5-.3 3.7-4.1 7.4-7.7 7.7-.3 0-.5.3-.5.6v.5c0 .3.2.5.5.6 3.6.3 7.3 4 7.7 7.7 0 .3.3.6.7.6h.4c.4 0 .6-.3.7-.6.3-4.1 3.6-7.4 7.7-7.7.3 0 .6-.3.6-.6v-.5c0-.3-.3-.6-.6-.6-4.1-.2-7.4-3.6-7.7-7.7-.1-.3-.4-.5-.7-.5z"
          ></path>
        </g>
      </svg>

      <div className="palmistry-container__content">
        <div>
          <span className="palmistry-container__title palmistry-container__title_for-image">
            {translate("/scan-info.title")}
          </span>
        </div>

        <div className="palmistry-container__description">
          {translate("/scan-info.text")}
        </div>
      </div>

      <div className="palmistry-container__bottom-content">
        <Button type="button" onClick={onNext} active>
          {translate("/scan-info.button")}
        </Button>

        <BiometricData />
      </div>
    </>
  );
}
