import ReportInfo from "@/Widgets/ReportInfo/ReportInfo";
import "./ReportDetailsPage.scss";
import { reportDetailsStore } from "./report-details.store";
import ReportImages from "@/Widgets/ReportImages/ReportImages";
import ReviewsSection from "@/Widgets/general/ReviewsSection/ReviewsSection";

const ReportDetailsPage = async ({
  params,
}: {
  params: { id: string };
}) => {
  const data = await reportDetailsStore.getReportDetails(params.id);

  return (
    <div className="report-details-page">
      <div className="report-details-page__container">
        <ReportInfo
          description={data?.description}
          date={data?.created_at}
          category={data?.category}
          count_likes={data?.total_likes}
          author={data?.author}
          location={data?.location}
        />
        <ReportImages images={data?.image!} />
      </div>
      <ReviewsSection id={data?.id} endpoint="report" />
    </div>
  );
};

export default ReportDetailsPage;
