import Typography from "@/shared/ui/components/Typography/Typography";
import "./NewsDetails.scss";
import { apiInstance } from "@/shared/config/apiConfig";
import { INews } from "@/shared/types/news-type";
import Image from "next/image";
import message from "./icons/message.svg";
import calendar from "./icons/calendar.svg";
import ReviewSection from "@/widgets/ReviewSection/ReviewSection";

const NewsDetails = async ({
  params,
}: {
  params: { id: string };
}) => {
  const getNewsById = async () => {
    const response = await apiInstance.get<INews>(
      `/news/${params.id}/`
    );

    return response.data;
  };

  const data = await getNewsById();

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

  return (
    <div className="news-details page-padding">
      <Typography element="h2">{data.title}</Typography>

      <div className="news-details__img">
        <img id="news-img" src={data.image} alt="News Image" />
        <div className="news-details__date-and-reviews">
          <div className="news-details__date">
            <Image src={calendar} alt="Calendar Icon" />
            <p>
              {months[data.created_at.slice(5, 7)]}{" "}
              {data.created_at.slice(5, 7).slice(0, 1) === "0"
                ? data.created_at.slice(6, 7)
                : data.created_at.slice(5, 7)}
              , {data.created_at.slice(0, 4)}
            </p>
          </div>

          <div className="news-details__reviews">
            <Image src={message} alt="Message Icon" />
            <p>Комментарии: {data.count_reviews}</p>
          </div>
        </div>
      </div>

      <div className="news-details__text">
        <h3>{data.title}</h3>
        <p>{data.description}</p>
      </div>

      <ReviewSection endpoint="news" id={data.id} />
    </div>
  );
};

export default NewsDetails;