import {
  BreadcrumbItem,
  CustomBreadcrumb,
} from "@/components/shared/CustomBreadcrumb";
import {
  PressArticleHeader,
  PressArticleContent,
  PressArticleTags,
  PressArticleShare,
} from "./components";
import { Press } from "@/types/Press";
import { useLocale, useTranslations } from "next-intl";

interface ContentPressDetailsSectionProps {
  pressDetails: Press;
}

export default function ContentPressDetailsSection({
  pressDetails,
}: ContentPressDetailsSectionProps) {
  const locale = useLocale();
  const breadcrumbT = useTranslations("Breadcrumb");

  // Extract data from pressDetails
  const title = pressDetails.title;
  const date = pressDetails.created_at
    ? new Date(pressDetails.created_at).toLocaleDateString(
        locale === "ar" ? "ar-SA" : "en-GB",
        {
          day: "numeric",
          month: "long",
          year: "numeric",
        }
      )
    : undefined;
  const author = pressDetails.journalist;
  const content = pressDetails.content;

  // Convert content to paragraphs (split by double line breaks or create single paragraph)
  const paragraphs = content
    ? content.split("\n\n").filter((p) => p.trim())
    : [];

  // Extract category names as tags
  const tags = pressDetails.categories?.map((cat) => cat.name) || [];

  const breadcrumbItems: BreadcrumbItem[] = [
    { label: breadcrumbT("home"), href: "/" },
    { label: breadcrumbT("press"), href: "/press" },
    { label: title, isCurrentPage: true },
  ];

  return (
    <section className="flex flex-col gap-5 sm:gap-10">
      <CustomBreadcrumb items={breadcrumbItems} />
      <PressArticleHeader title={title} date={date} author={author} />

      <PressArticleContent paragraphs={paragraphs} />

      <div className="flex flex-col lg:flex-row lg:justify-between gap-5 sm:gap-10">
        <PressArticleTags tags={tags} />
        <PressArticleShare />
      </div>
    </section>
  );
}