"use client";
import Loading from "@/app/loading";
import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import { NotificationDetailsCard } from "@/components/ui/notification-details-card";
import { useGetNotificationDetails } from "@/hooks/queries/useNotificationQueries";
import { BreadcrumbItem } from "@/types/shared";
import { use } from "react";

interface IProps {
  params: Promise<{ id: string }>;
}

const NotificationDetailsPage = ({ params }: IProps) => {
  const { id } = use(params);
  const { data, isLoading } = useGetNotificationDetails(id);

  const breadcrumbItems: BreadcrumbItem[] = [
    {
      href: "/",
      name: "Dashboard",
    },
    {
      href: "/notification-history",
      name: "Notification history",
    },
    {
      href: `/notification-history/${id}`,
      name: "Notification details",
    },
  ];
  if (isLoading) return <Loading />;
  return (
    <>
      <Breadcrumb items={breadcrumbItems} />
      {data?.data && <NotificationDetailsCard data={data.data} />}
    </>
  );
};

export default NotificationDetailsPage;
