"use client"

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

interface notificationProps {
  lang: Lang
  id: string
}

export const OrderInvoice: React.FC<notificationProps> = ({ id }) => {
  const { data, isLoading, error, isError } = getOrder(id)

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

  if (isError || !data || error || data?.errors?.error) {
    return (
      <div className="my-16 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={data?.errors?.error ? data?.errors?.error : "Something_wrong"} />
      </div>
    )
  }

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

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