import { newsDetailsStore } from "./store";
import "./NewsDetailsPage.scss";
import HeaderText from "@/Shared/UI/HeaderText/HeaderText";

import ReviewsSection from "@/Widgets/general/ReviewsSection/ReviewsSection";
import NewsHeader from "@/Widgets/NewsHeader/NewsHeader";

const NewsDetailsPage = async ({
  params,
}: {
  params: { id: string };
}) => {
  const data = await newsDetailsStore.getNewsDetails(params.id);

  return (
    <div className="news-details-page">
      <HeaderText>{data?.title}</HeaderText>

      <div className="news-details-page__wrapper">
        <NewsHeader
          date={data?.created_at}
          image={data?.image}
          count_reviews={data?.count_reviews}
        />
        <p className="news-details-page__description">
          {data?.description}
        </p>

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

export default NewsDetailsPage;
