"use client";
import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import axios from "axios";
import React, { useEffect, useState } from "react";

interface Data {
  [key: string]: any;
}

const Page: React.FC<{ params: { modelName: string; id: number } }> = ({
  params,
}) => {
  const token = localStorage.getItem("jobAdminJwtToken");
  const modelName: string = params.modelName;
  const id: number = params.id;
  const formattedModelName = modelName.replace("-", " ");

  const [data, setData] = useState<Data>({});

  async function fetchData() {
    try {
      const response: any = await axios.get(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}${modelName}/${id}`,
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
          },
        }
      );

      setData(response.data);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  }

  useEffect(() => {
    fetchData();
  }, [modelName]);

  // Function to render key-value pairs recursively for nested objects
  const renderKeyValuePairs = (obj: Data) => {
    return Object.entries(obj).map(([key, value]) => {
      if (typeof value === "object" && value !== null) {
        // If value is an object, recursively render its key-value pairs
        return (
          <tr
            key={key}
            className="border-b border-stroke dark:border-strokedark"
          >
            <td>{key}</td>
            <td>
              <table>
                <tbody>
                  <tr>
                    <td>{renderKeyValuePairs(value)}</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        );
      } else {
        // If value is not an object, render the key-value pair
        return (
          <tr
            className="border-b border-stroke dark:border-strokedark"
            key={key}
          >
            <td className="py-4">{key}</td>
            <td className="py-4">{value}</td>
          </tr>
        );
      }
    });
  };

  return (
    <>
      <Breadcrumb pageName={`View ${formattedModelName.slice(0, -1)}`} />
      <div className="flex flex-col gap-2">
        <div className="flex flex-col">
          <table>
            <tbody>{renderKeyValuePairs(data)}</tbody>
          </table>
        </div>
      </div>
    </>
  );
};

export default Page;