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

interface HouseholdInformationStepProps {
  householdInfo: HouseholdInfo;
}

export default function HouseholdInformationStep({ householdInfo }: HouseholdInformationStepProps) {
  const safeHouseholdInfo = householdInfo || {};
  const members = safeHouseholdInfo.members || [];

  return (
    <>
      <div className="p-6 pb-0 min-h-[260px]">
        <SectionHeader title="Household Members" />
        
        <div className="space-y-6">
          {members.length > 0 ? (
            members.map((member, idx) => (
              <HouseholdMemberCard key={idx} member={member} index={idx} />
            ))
          ) : (
            <p className="text-gray-500 text-center py-8">No household members found</p>
          )}
        </div>
      </div>

      <div className="p-6 pb-0">
        <SectionHeader title="Income Summary" />
        <DataTable data={[
          { label: "Gross Annual Household Income", value: safeHouseholdInfo.grossAnnualIncome || "" },
        ]} />
      </div>

      <div className="p-6">
        <SectionHeader title="Household Counts" />
        <DataTable data={[
          { label: "Total Persons in Dwelling", value: safeHouseholdInfo.totalPersons || 0 },
          { label: "Number of Children Under 18", value: safeHouseholdInfo.childrenUnder18 || 0 },
        ]} />
      </div>
    </>
  );
}