import "./NewsHeader.scss";
import Image from "next/image";
import message_icon from "./icons/message-icon.svg";
import calendar_icon from "./icons/calendar-icon.svg";
import React from "react";

interface INewsHeaderProps {
  date: string | undefined;
  image: string | undefined;
  count_reviews: number | undefined;
}

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

  const year = date?.slice(0, 4);
  const month = date?.slice(5, 7);
  const day = date?.slice(8, 10);

  return (
    <div className="news-header">
      <img
        src={image}
        alt="News Image"
        className="news-header__main-image"
      />
      <div className="news-header__date-and-reviews">
        <span>
          <Image src={calendar_icon} alt="Calendar Icon" />
          {month && months[month]} {day}, {year}
        </span>
        <span>
          <Image src={message_icon} alt="Message Icon" />
          Комментарии: {count_reviews}
        </span>
      </div>
    </div>
  );
};

export default NewsHeader;
