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

interface IThankYouBannerProps {
  containerClassName?: string;
}

function ThankYouBanner({ containerClassName = "" }: IThankYouBannerProps) {
  const { translate } = useTranslations(ELocalesPlacement.V1);

  return (
    <div className={`${styles.container} ${containerClassName}`}>
      <img
        className={styles.image}
        src="/smiling-face-with-hearts.webp"
        alt="Love"
      />
      <div className={styles["text-container"]}>
        <Title variant="h4" className={styles.title}>
          {translate("/add-report.thank_you")}
        </Title>
        <p className={styles.text}>
          {translate("/add-report.order_successful")}
        </p>
      </div>
    </div>
  );
}

export default ThankYouBanner;
