import Title from "@/components/Title";
import styles from "./styles.module.css";
import { IReview } from "@/data/reviews";

type IReviewProps = IReview;

function Review({ username, date, text, mark, image }: IReviewProps) {
  return (
    <div className={styles.review}>
      <div className={`${styles.avatar} ${image?.length && styles.middle}`}>
        {!image?.length && <span>{username.slice(0, 2)}</span>}
        {!!image?.length && (
          <img className={styles.image} src={image} alt="Customer Avatar" />
        )}
      </div>
      <div>
        <div className={styles.header}>
          <div className={styles.info}>
            <Title variant="h6" className={styles.title}>
              {username}
            </Title>
            <p>{date}</p>
          </div>
          {!!mark && (
            <span
              className={styles.stars}
              style={{
                background: `linear-gradient(
                90deg,
                rgb(255, 204, 0) ${(mark / 5) * 100}%,
                rgb(238, 238, 238) 0px
            )`,
              }}
            ></span>
          )}
        </div>
        <div className={styles.content}>
          <p className={styles.text}>{text}</p>
        </div>
      </div>
    </div>
  );
}

export default Review;
