'use client';

import { FC, useState } from "react";
import renderOneClientSelection from "./renderOneClientSelection";

interface ClientSelectionSectionProps {
    selectionData: any;
    initialSelectedClient?: any;
    onClientSelect?: (client: any) => void;
}

const ClientSelectionSection: FC<ClientSelectionSectionProps> = ({
    selectionData,
    initialSelectedClient = null,
    onClientSelect
}) => {
    const [selectedClient, setSelectedClient] = useState<any>(initialSelectedClient);
    if (!selectionData || !selectionData.selectionList || selectionData.selectionList.length === 0) { return null }
    const handleClientSelection = (client: any) => { setSelectedClient(client); if (onClientSelect) { onClientSelect(client) } };

    return (
        <div className="mb-3">
            {selectionData.selectionList.map((client: any, index: number) => {
                return (
                    <div
                        key={client.uu_id || client.id || `client-${index}`}
                        onClick={() => handleClientSelection(client)}
                    >
                        {client && renderOneClientSelection({
                            item: client,
                            isSelected: selectedClient?.uu_id === client.uu_id,
                            onClickHandler: handleClientSelection
                        })}
                    </div>
                );
            })}
        </div>
    );
};

export default ClientSelectionSection;
