"use client";

import React from "react";
import { useTranslations } from "next-intl";
import { useGetProductDetailsQuery } from "@/store/slices/products-slice";
import Loading from "@/components/loading";
import ProductDetailsBalmy from "@/components/balmy/product-details-balmy";

interface ProductPageStatusProps {
  productId: number;
  locale: string;
}

export default function ProductPageStatus({ productId, locale }: ProductPageStatusProps) {
  const t = useTranslations("product-details");
  const { data, isLoading, error } = useGetProductDetailsQuery({ id: productId, locale });

  if (isLoading) {
    return <Loading fullScreen variant="spinner" size="xl" />;
  }

  if (error || !data?.data) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="text-center">
          <p className="text-lg text-gray-500 font-cairo">
            {t("product-not-found") || "المنتج غير متوفر"}
          </p>
        </div>
      </div>
    );
  }

  return <ProductDetailsBalmy product={data.data} />;
}