import { HouseholdMember } from "@/src/types/admin/types";

interface HouseholdMemberCardProps {
  member: HouseholdMember;
  index: number;
}

export default function HouseholdMemberCard({ member, index }: HouseholdMemberCardProps) {
  const safeMember = member || {};
  const incomes = safeMember.incomes || safeMember.incomeDetails || [];
  const hasIncome = safeMember.hasIncome || safeMember.income || "no";

  return (
    <div className="overflow-hidden border border-gray-200 rounded-xl bg-white shadow-sm">
      {/* Main Member Info */}
      <table className="w-full text-sm">
        <tbody>
          <tr className="border-b">
            <td className="bg-gray-50 px-4 py-3 font-medium text-gray-700 w-1/3">
              Name
            </td>
            <td className="px-4 py-3 text-gray-900">{safeMember.name || ""}</td>
          </tr>
          <tr className="border-b">
            <td className="bg-gray-50 px-4 py-3 font-medium text-gray-700 w-1/3">
              Relation with Applicant
            </td>
            <td className="px-4 py-3 text-gray-900">{safeMember.relationWithApplicant || safeMember.relation || ""}</td>
          </tr>
          <tr className="border-b">
            <td className="bg-gray-50 px-4 py-3 font-medium text-gray-700 w-1/3">
              Age
            </td>
            <td className="px-4 py-3 text-gray-900">{safeMember.age || ""}</td>
          </tr>
          <tr>
            <td className="bg-gray-50 px-4 py-3 font-medium text-gray-700">
              Does this member have income?
            </td>
            <td className="px-4 py-3 text-gray-900 capitalize font-semibold text-green-600">
              {hasIncome}
            </td>
          </tr>
        </tbody>
      </table>

      {/* Income Details */}
      {hasIncome === "yes" && incomes.length > 0 && (
        <div className="p-4 bg-gray-50 border-t border-gray-200">
          <p className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
            Income Breakdown
          </p>
          <div className="overflow-hidden border border-gray-200 rounded-lg bg-white">
            <table className="w-full text-sm text-left">
              <thead className="bg-gray-100 text-gray-700 border-b">
                <tr>
                  <th className="px-4 py-2 font-semibold text-center">Sr No</th>
                  <th className="px-4 py-2 font-semibold">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">
                {incomes.map((income, i) => (
                  <tr key={i} className="hover:bg-gray-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 || ""}</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>
  );
}