import Image from "next/image";
import "./ReviewCard.scss";
import calendar_icon from "./icons/calendar-icon.svg";

interface IReviewCardProps {
  item: IReview;
}

interface IReview {
  id: number;
  author: IAuthor;
  review: string;
  created_at: string;
}

interface IAuthor {
  id: number;
  first_name: string;
  last_name: string;
  image: string;
}

const ReviewCard: React.FC<IReviewCardProps> = ({
  item,
}: IReviewCardProps) => {
  const months: Record<string, string> = {
    "01": "Январь",
    "02": "Февраль",
    "03": "Март",
    "04": "Апрель",
    "05": "Май",
    "06": "Июнь",
    "07": "Июль",
    "08": "Август",
    "09": "Сентябрь",
    "10": "Октябрь",
    "11": "Ноябрь",
    "12": "Декабрь",
  };

  const year = item?.created_at.slice(0, 4);
  const month = item?.created_at.slice(5, 7);
  const day = item?.created_at.slice(8, 10);
  return (
    <div className="review-card">
      <div className="review-card__header">
        <img
          className="review-card__header_left"
          src={item.author.image}
          alt="Author Image"
        />
        <div className="review-card__header_right">
          <h4>
            {item.author.first_name} {item.author.last_name}
          </h4>
          <span>
            <Image src={calendar_icon} alt="Calendar Icon" />
            {month && months[month]} {day}, {year}
          </span>
        </div>
      </div>
      <p>{item.review}</p>
    </div>
  );
};

export default ReviewCard;
