"use client";

import Image from "next/image";
import { Skeleton } from "@/components/ui/skeleton";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import { images } from "@/lib/images";
import useGetQuery from "@/hooks/useGetQuery";
import LangLink from "@/components/ui/localization/LangLink";

const AllNotification = ({ lang }: { lang: Lang }) => {
  const { data, isLoading, isError } = useGetQuery<NotificationDataInterface[]>(
    {
      endpoint: "api/Order/get_notification",
      queryKey: ["get-notification"],
      select: (data) => data.data,
      // lang,
      // staleTime: 1000,
    }
  );

  if (isError) {
    return (
      <div className="w-full max-w-xl mx-auto bg-red-200 text-center py-6 px-2 rounded-xl text-slate-50 font-bold text-lg">
        <TranslateClient text="Something_wrong" />
      </div>
    );
  }

  if (isLoading) {
    return <Skeleton className="w-full h-14 rounded-xl" />;
  }

  if (!data || data?.length === 0) {
    return (
      <p className="font-semibold text-center text-slate-600 text-lg">
        There is no notifications right now.
      </p>
    );
  }

  return (
    <>
      {data?.length > 0 &&
        data?.map((item) => (
          <LangLink
            href={`/notification/${item?.id}`}
            key={item?.id}
            className="border border-mainBlue rounded-xl p-3 flex gap-3 items-center mb-5 cursor-pointer"
          >
            <Image
              src={images.notificationWithBackground}
              alt="notification"
              width={30}
              height={30}
            />
            <span>{item?.message}</span>
          </LangLink>
        ))}
    </>
  );
};

export default AllNotification;