import DataTable from "../../_common/components/DataTable";
import SectionHeader from "../../_common/components/SectionHeader";

interface IncomeDetail {
  incomeType: string;
  incomeAmount: string;
}

interface EmploymentData {
  label: string;
  employer: string;
  address?: string;
  hasIncome: string;
  incomeDetails: IncomeDetail[];
}

interface EmploymentDetailsStepProps {
  employmentData: EmploymentData[];
  isCurrentlyEmployed?: string;
}

export default function EmploymentDetailsStep({ employmentData, isCurrentlyEmployed }: EmploymentDetailsStepProps) {
 
  return (
    <div className="p-6 min-h-[260px]">
      <SectionHeader title="Employment Status" />
      <DataTable data={[
        { label: "Are you currently employed?", value: isCurrentlyEmployed === "yes" ? "Yes" : "No" },
      ]} />

      {isCurrentlyEmployed === "yes" && (
        <>
          <div className="mt-6">
            <SectionHeader title="Applicant Details" />
          </div>

          <div className="space-y-8">
        {employmentData.map((person, idx) => (
          <div key={idx}>
            <SectionHeader subtitle={person.label} />
            
            <div className="overflow-hidden border border-gray-200 rounded-xl bg-white shadow-sm">
              <DataTable 
                data={[
                  { label: "Employer's Name", value: person.employer || "N/A" },
                  ...(person.address ? [{ label: "Employer's Address", value: person.address }] : []),
                  { 
                    label: `Does ${idx === 0 ? 'Applicant' : 'Co-Applicant'} have income?`, 
                    value: person.hasIncome || "N/A" 
                  },
                ]} 
              />

              {person.hasIncome === "yes" && person.incomeDetails.length > 0 && (
                <div className="p-4 bg-gray-50 border-t border-gray-200">
                  <p className="text-[10px] font-bold text-gray-400 uppercase mb-3">Income Breakdown</p>
                  <div className="overflow-hidden border border-gray-200 rounded-lg bg-white">
                    <table className="w-full text-sm">
                      <thead className="bg-gray-100 text-gray-600 border-b">
                        <tr>
                          <th className="px-4 py-2 font-semibold text-center">Sr No</th>
                          <th className="px-4 py-2 font-semibold text-left">Income Type</th>
                          <th className="px-4 py-2 font-semibold text-right">Income Amount</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-gray-100">
                        {person.incomeDetails.map((income, i) => (
                          <tr key={i} className="hover:bg-gray-50/50">
                            <td className="px-4 py-2 text-center text-gray-500">{i + 1}</td>
                            <td className="px-4 py-2 text-gray-900">{income.incomeType || "N/A"}</td>
                            <td className="px-4 py-2 text-right font-mono font-medium text-gray-900">
                              ${income.incomeAmount || "0"}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              )}
            </div>
          </div>
        ))}
          </div>
        </>
      )}
    </div>
  );
}