"use client";

import React from "react";
import { useSearchParams } from "next/navigation";
import useSWR from "swr";
import axios from "@/lib/axios";
import PageBreadcrumb from "@/components/common/PageBreadCrumb";
import PageLoader from "@/components/ui/PageLoader";
import { useTranslations } from "next-intl";

import CertificateDetails from "@/components/certificates/CertificateDetails";

export default function CertificateDetailsClient() {
  const t = useTranslations("Certificates");
  const searchParams = useSearchParams();
  const idOrUuid = searchParams.get("uuid") || searchParams.get("id");

  const { data, error, isLoading } = useSWR(
    idOrUuid ? `/api/certificates/${idOrUuid}` : null,
    (url) => axios.get(url).then((res) => res.data)
  );

  if (isLoading) {
    return <PageLoader text={t("loading_details")} />;
  }

  if (error || !data?.data) {
    return (
      <div className="p-10 text-center text-error-500">
        {t("details_fetch_failed")}
      </div>
    );
  }

  const certificate = data.data;

  return (
    <div>
      <PageBreadcrumb pageTitle={`${certificate.common_name} ${t("page_title")}`} />
      
      <div className="space-y-6">
        <CertificateDetails certificate={certificate} />
      </div>
    </div>
  );
}
