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

export interface IReviewProps {
  username: string;
  tagline?: string;
  stars?: number;
  date?: string;
  avatar: string;
  text: string;
}

function Review({ username, tagline, stars = 5, date, avatar, text }: IReviewProps) {
  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <img src={avatar} alt="Avatar" className={styles.avatar} />
        <div className={styles.info}>
          <p className={styles.name}>{username}</p>
          <div className={styles.stars}>
            {Array.from({ length: stars }).map((_, index) => (
              <img
                key={index}
                src={`${compatibilityV2Prefix}/star.png`}
                alt="star"
              />
            ))}
          </div>
        </div>
        {date && <p className={styles.date}>{date}</p>}
      </div>
      {tagline && <p className={styles.tagline}>{tagline}</p>}
      <p className={styles.text}
        style={{
          marginTop: tagline ? "16px" : "4px"
        }}
      >{text}</p>
    </div>
  );
}

export default Review;
