import { palmistryV1Prefix } from "@/routes";
import styles from "./styles.module.scss";

export interface IReviewProps {
  username: string;
  tagline?: string;
  stars?: number;
  avatar: string;
  text: string;
  date: string;
  gender: "male" | "female";
}

function Review({
  username,
  tagline,
  stars = 5,
  avatar,
  text,
  date,
  gender,
}: IReviewProps) {
  return (
    <div className={`${styles.container} ${styles[gender]}`}>
      <div className={styles.header}>
        {!!avatar?.length && <img src={avatar} alt="Avatar" className={styles.avatar} />}
        {!avatar?.length && <div className={styles["avatar-chars"]}>{username.slice(0, 2)}</div>}
        <div className={styles.info}>
          <div>
            <p className={styles.name}>{username}</p>
            <p className={styles.date}>{date}</p>
          </div>
          <div className={styles.stars}>
            {Array.from({ length: stars }).map((_, index) => (
              <img
                key={index}
                src={`${palmistryV1Prefix}/star.png`}
                alt="star"
              />
            ))}
          </div>
        </div>
      </div>
      {tagline && <p className={styles.tagline}>{tagline}</p>}
      <p className={styles.text}>{text}</p>
    </div>
  );
}

export default Review;
