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";
import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
import { Metadata } from "next";

export async function generateMetadata({
  params,
}: {
  params: { id: string };
}): Promise<Metadata> {
  const response = await apiInstance.get<INews>(`/news/${params.id}/`);

  return {
    title: response.data.title,
    description: response.data.description,
    openGraph: {
      images: [response.data.image],
      type: "article",
      publishedTime: response.data.created_at,
    },
  };
}
const formatDescription = (text: string) => {
  return text.replace(/(\r\n|\n|\r)/g, "<br />");
};

//<<<<<<< HEAD:src/app/[locale]/news/[id]/page.tsx
const NewsDetails = async ({
  params,
}: {
  params: { id: string; новость: string };
}) => {
//=======
//const NewsDetails = async ({ params }: { params: { id: string } }) => {
//>>>>>>> master:src/app/news/[id]/page.tsx
  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">
      <BreadCrumbs />
      <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(8, 10) === "0"
                ? data.created_at.slice(9, 10)
                : data.created_at.slice(8, 10)}
              , {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>
        <div
          className="news-details__description"
          dangerouslySetInnerHTML={{
            __html: formatDescription(data.description),
          }}
        />
      </div>

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

export default NewsDetails;