import {
  AboutDesignerSection,
  EventTime,
  EventHeader,
  EventDescription,
  EventLocation,
} from "./components";
import { EventDetails } from "@/types/Programs";
import { useTranslations } from "next-intl";
import {
  CustomBreadcrumb,
  type BreadcrumbItem,
} from "@/components/shared/CustomBreadcrumb";

interface ContentProgramSectionProps {
  eventDetails: EventDetails;
}

export default function ContentProgramSection({
  eventDetails,
}: ContentProgramSectionProps) {
  const t = useTranslations("ProgramDetailsPage");
  const breadcrumbT = useTranslations("Breadcrumb");

  // Extract data from eventDetails
  const eventTitle = eventDetails.title;
  const designerName = eventDetails.designer_name;
  const description = [eventDetails.content]; // Convert to array for EventDescription
  const aboutDesignerDescription = eventDetails.designer_about;

  // Extract designer links
  const designerLinks = {
    personal: eventDetails.designer_personal_link,
    linkedin: eventDetails.designer_linkedin_link,
    instagram: eventDetails.designer_instagram_link,
    twitter: eventDetails.designer_twitter_link,
  };

  // Convert times to the expected format
  const timeSlots = eventDetails.times.map((time) => ({
    date: time.event_date_name,
    time: `${time.from} - ${time.to}`,
  }));

  // Create breadcrumb items
  const breadcrumbItems: BreadcrumbItem[] = [
    { label: breadcrumbT("home"), href: "/" },
    { label: breadcrumbT("programs"), href: "/programs" },
    { label: eventTitle, isCurrentPage: true },
  ];

  return (
    <section className="flex flex-col gap-5 sm:gap-10">
      <CustomBreadcrumb items={breadcrumbItems} />
      <EventHeader title={eventTitle} designerName={designerName} />
      <EventDescription paragraphs={description} />
      <AboutDesignerSection
        title={t("aboutDesigner")}
        description={aboutDesignerDescription}
        furtherInfoTitle={t("furtherInformation")}
        designerLinks={designerLinks}
      />
      <EventTime title={t("eventTimes")} timeSlots={timeSlots} />
      <EventLocation locations={eventDetails.locations} />
    </section>
  );
}