import { Certification } from "@/src/types/admin/types";
import DataTable from "../DataTable";
import SectionHeader from "../SectionHeader";

interface CertificationStepProps {
  certification: Certification;
}

export default function CertificationStep({ certification }: CertificationStepProps) {
  const safeCertification = certification || {};
  
  const certificationData = [
    { label: "Legal Name of Signer", value: safeCertification.signerName || "" },
    { label: "Date & Time", value: safeCertification.dateTime || "" },
  ];

  return (
    <div className="p-6 min-h-[260px]">
      <SectionHeader title="Applicant Certification" className="border-b pb-4 mb-4" />

      <div className="flex flex-col md:flex-row items-start gap-8">
        <div className="shrink-0 border-2 border-dashed border-gray-200 rounded-md bg-white p-2">
          {safeCertification.signatureUrl ? (
            <img
              src={safeCertification.signatureUrl}
              alt="Signature"
              className="h-20 w-40 object-contain"
            />
          ) : (
            <div className="h-20 w-40 flex items-center justify-center text-gray-400 text-sm">
              No signature available
            </div>
          )}
        </div>

        <div className="flex-1">
          <DataTable data={certificationData} />
        </div>
      </div>
    </div>
  );
}