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

interface RenovationDetailsStepProps {
  renovationDetails: RenovationDetails;
}

export default function RenovationDetailsStep({ renovationDetails }: RenovationDetailsStepProps) {
  const safeRenovationDetails = renovationDetails || {};
  const maintenanceIssues = safeRenovationDetails.maintenanceIssues || [];

  return (
    <div className="p-6 min-h-[260px]">
      <SectionHeader title="Renovation & Maintenance" />

      <div className="space-y-4">
        <DataTable data={[
          { label: "Improvements Requested", value: safeRenovationDetails.improvementsRequested || "" },
        ]} />

        {maintenanceIssues.length > 0 && (
          <>
            <p className="text-[10px] font-bold uppercase text-red-500 tracking-widest mt-2">
              Maintenance Issues Selected
            </p>

            <div className="overflow-hidden border border-gray-200 rounded-xl bg-white">
              <table className="w-full text-sm">
                <tbody>
                  {maintenanceIssues.map((issue, idx) => (
                    <tr key={idx} className="border-b last:border-b-0">
                      <td className="bg-gray-50 px-4 py-3 font-medium text-gray-700 w-1/3">
                        {issue.category || ""}
                      </td>
                      <td className="px-4 py-3 text-gray-900">{issue.description || ""}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </>
        )}

        <DataTable data={[
          { label: "Other Requests", value: safeRenovationDetails.otherRequests || "" },
        ]} />
      </div>
    </div>
  );
}