import Image from "next/image";

import { Typography } from "@/components/ui";
import { emailMarketingCompV1Images } from "@/shared/constants/images";

import styles from "./Review.module.scss";

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

export default function Review({
  username,
  tagline,
  stars = 5,
  avatar,
  text,
  date,
  gender,
}: IReviewProps) {
  return (
    <div className={`${styles.container} ${styles[gender]}`}>
      <div className={styles.header}>
        {!!avatar?.length && (
          <Image
            src={avatar}
            alt="Avatar"
            className={styles.avatar}
            width={35}
            height={35}
          />
        )}
        {!avatar?.length && (
          <div className={styles["avatar-chars"]}>{username.slice(0, 2)}</div>
        )}
        <div className={styles.info}>
          <div>
            <Typography
              as="p"
              size="sm"
              weight="medium"
              className={styles.name}
            >
              {username}
            </Typography>
            <Typography as="p" size="xs" className={styles.date}>
              {date}
            </Typography>
          </div>
          <div className={styles.stars}>
            {Array.from({ length: stars }).map((_, index) => (
              <Image
                key={index}
                src={emailMarketingCompV1Images("star.png")}
                alt="star"
                width={14}
                height={14}
              />
            ))}
          </div>
        </div>
      </div>
      {tagline && (
        <Typography as="p" className={styles.tagline}>
          {tagline}
        </Typography>
      )}
      <Typography as="p" size="sm" align="left" className={styles.text}>
        {text}
      </Typography>
    </div>
  );
}
