import React from 'react';
import { Card, CardContent } from '@/components/ui/card';
import CardTable from './CardTable';
import { UnknownRecord } from '@/types';
import CommissionInfoDialog from './CommissionInfoDialog';

export default function CaseCards({
  enquiryType,
  eligibleCases,
}: {
  enquiryType: string;
  eligibleCases: any;
}) {
  return (
    <div className="space-y-4 p-1 m-0 w-full">
      {eligibleCases.map((caseRow: UnknownRecord, caseRowIndex: number) => {
        return (
          <Card key={caseRowIndex} className="space-y-1 pt-4 pb-4">
            <div className="flex justify-between flex-strip-line pl-6 pr-6 mb-4">
              <div>
                {caseRowIndex + 1}. {caseRow.fname} {caseRow.lname} -{' '}
                {caseRow.UID} - {caseRow.case_uid}
                {caseRow.length > 1 && (
                  <span className="text-sm text-gray-500 ml-2">
                    ({caseRow.length} record{caseRow.length > 1 ? 's' : ''})
                  </span>
                )}
              </div>
              <div>
                <CommissionInfoDialog
                  record={caseRow}
                  enquiryType={enquiryType}
                />{' '}
              </div>
            </div>

            <CardContent className="space-y-4">
              <div
                key={`field-${caseRowIndex}`}
                className="border-b border-gray-200 pb-4 last:border-b-0 last:pb-0"
              >
                <div className="w-full">
                  <CardTable
                    commissionData={caseRow}
                    enquiryType={enquiryType}
                  />
                </div>
              </div>
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
}