import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { images } from "../../data";
import Button from "../../ui/Button";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

interface IHowItWorksProps {
  onButtonClick: () => void;
}

function HowItWorks({ onButtonClick }: IHowItWorksProps) {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  return (
    <div className={styles.container}>
      <div className={styles.wrapper}>
        <Title variant="h2" className={styles.title}>
          {translate("/welcome.title_3")}
        </Title>
        <ul className={styles.list}>
          <li className={styles.item}>
            <img alt="one" width="209" height="209" src={images("1.webp")} />
            <div>
              <Title variant="h4" className={styles["item-title"]}>
                {translate("/welcome.how_it_works_title_1")}
              </Title>
              <p className={styles["item-description"]}>
                {translate("/welcome.how_it_works_text_1")}
              </p>
            </div>
          </li>
          <li className={styles.item}>
            <img alt="two" width="209" height="209" src={images("2.webp")} />
            <div>
              <Title variant="h4" className={styles["item-title"]}>
                {translate("/welcome.how_it_works_title_2")}
              </Title>
              <p className={styles["item-description"]}>
                {translate("/welcome.how_it_works_text_2")}
              </p>
            </div>
          </li>
          <li className={styles.item}>
            <img alt="three" width="209" height="209" src={images("3.webp")} />
            <div>
              <Title variant="h4" className={styles["item-title"]}>
                {translate("/welcome.how_it_works_title_3")}
              </Title>
              <p className={styles["item-description"]}>
                {translate("/welcome.how_it_works_text_3")}
              </p>
            </div>
          </li>
        </ul>
        <Button onClick={onButtonClick} />
      </div>
    </div>
  );
}

export default HowItWorks;
