import { useTranslations } from "@/hooks/translations";
import { images, IReview, sprites } from "../../data";
import Stars from "../Stars";
import styles from "./styles.module.scss";
import { ELocalesPlacement } from "@/locales";

type TReviewProps = IReview;

function Review2({ avatar, name, date, text }: TReviewProps) {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  return (
    <div className={styles.container}>
      <div>
        <Stars color="var(--star)" />
        <p className={styles.text}>{translate(text)}</p>
      </div>
      <div className={styles.footer}>
        <div className={styles["info-wrapper"]}>
          <img
            src={images(avatar)}
            alt="avatar"
            width="38"
            height="38"
            className={styles.avatar}
          />
          <div className={styles.info}>
            <p className={styles.name}>{translate(name)}</p>
            <div className={styles.verified}>
              <svg width="16px" height="16px" aria-hidden="true">
                <use xlinkHref={`${sprites}#trusted-customer`}></use>
              </svg>
              <span>{translate("/reviews.verified_user")}</span>
            </div>
          </div>
        </div>
        <span className={styles.date}>{date}</span>
      </div>
    </div>
  );
}

export default Review2;
