import "./ReportDetails.scss";
import { IReport } from "@/shared/types/report-type";
import ReviewSection from "@/widgets/ReviewSection/ReviewSection";
import { Metadata } from "next";
import ReportInformation from "@/widgets/report-details/ReportInformation/ReportInformation";
import ReportImages from "@/widgets/report-details/ReportImages/ReportImages";
import dynamic from "next/dynamic";
import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";

const DynamicMap = dynamic(
  () => import("@/widgets/report-details/ReportMap/ReportMap"),
  {
    ssr: false,
  }
);

export const metadata: Metadata = {
  title: "KG ROAD | Обращение",
  description:
    "Страница обращения Kyrgyzstan Transperency International",
};

const ReportDetails = async ({
  params,
}: {
  params: { id: string };
}) => {
  const getReportDetails = async () => {
    const res = await fetch(
      `${process.env.NEXT_PUBLIC_BASE_API}/report/${params.id}/`,
      { cache: "no-store" }
    );

    return res.json();
  };
  const report: IReport = (await getReportDetails()) || {};

  return (
    <div className="report-details page-padding">
      <BreadCrumbs />
      <div className="report-details__container">
        <ReportInformation
          id={report.id}
          location={report.location[0]}
          date={report.created_at}
          description={report.description}
          category={report.category}
          total_likes={report.total_likes}
          author={report.author}
        />
        <div className="report-details__map">
          <DynamicMap
            location={report.location}
            category={report.category}
          />
        </div>
        <ReportImages images={report.image} />
      </div>

      <ReviewSection endpoint="report" id={+params.id} />
    </div>
  );
};

export default ReportDetails;