/* eslint-disable @next/next/no-img-element */
import { apiInstance } from "@/shared/config/apiConfig";
import { INews, NewsDataResponse } from "@/shared/types/news-type";
import { Metadata } from "next";
import { Container, Title } from "@/shared/ui";

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

  return {
    title: response.data.title,
    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 />");
};

const NewsDetails = async ({
  params,
}: {
  params: { id: string; новость: string };
}) => {
  const getNewsById = async () => {
    const response = await apiInstance.get<NewsDataResponse>(
      `/news/${params.id}/`
    );
    return response.data.news_data;
  };

  const data = await getNewsById();
  console.log(data);

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

  return (
    <Container className="flex flex-col gap-[40px] py-[100px]">
      <p className="text-light-blue font-semibold text-center mb-3">
        {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>
      <Title
        text={data.title}
        size="lg"
        className="text-[48px] leading-[60px] font-semibold text-center mb-6"
      />

      <div>
        <img
          className="mb-[30px] w-full h-[598px] rounded-sm object-cover"
          src={`http://api.procurement.fishrungames.com/${data.image}`}
          alt="News Image"
        />
      </div>

      <div className="w-full flex flex-col gap-[10px] ">
        <div
          className="text-[20px] leading-[34px]"
          dangerouslySetInnerHTML={{
            __html: formatDescription(data.content),
          }}
        />
      </div>
    </Container>
  );
};

export default NewsDetails;