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 IAstrologersProps {
  onButtonClick: () => void;
}

function Astrologers({ onButtonClick }: IAstrologersProps) {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  return (
    <div className={styles.container}>
      <div className={styles.wrapper}>
        <Title variant="h2" className={styles.title}>
          {translate("/welcome.title_5")}
        </Title>
        <img
          className={styles.image}
          src={images("astrologers-card-mobile.webp")}
          alt="Astrologers"
        />
        <Button onClick={onButtonClick} />
      </div>
    </div>
  );
}

export default Astrologers;
