"use client"

import React from "react"
import TranslateClient from "@/components/ui/localization/TranslateClient"
import { getNotification } from "@/app/api-requests/getNotification"
import LoadingSpinner from "../shared/loadingSpinner/LoadingSpinner"
import InvoiceCard from "../shared/invoice-card/invoice-card"
import InvoiceInfo from "../shared/invoice-info/invoice-info"

interface notificationProps {
  lang: Lang
  type: boolean
  id: string
}

export const Notification: React.FC<notificationProps> = ({ type, id }) => {
  const { data, isLoading, isError } = getNotification(id)

  if (isLoading) {
    return (
      <div className="py-16">
        <LoadingSpinner />
      </div>
    )
  }

  if (isError || !data) {
    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>
    )
  }

  return (
    <>
      <InvoiceCard message={data.data.message} status={data.data.Order.status} orderId={data.data.Order.order_id} />

      {data.data.Order.status !== "reject" && <InvoiceInfo data={data.data.Order} />}
    </>
  )
}