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

interface Props {
  signature: TenantSignature;
}

export default function TenantSignatureStep({ signature }: Props) {
  const signatureData = [
    {
      label: "Legal Name of Signer",
      value: signature.signerName || "N/A"
    },
    {
      label: "Date & Time",
      value: signature.dateTime || "N/A"
    }
  ];

  return (
    <div className="p-6 min-h-[260px]">
      <SectionHeader title="Acknowledgment" className="border-b pb-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">
          {signature.signatureUrl ? (
            <img
              src={signature.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 w-full">
          <DataTable data={signatureData} />
        </div>
      </div>
    </div>
  );
}