encoach_frontend/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx

import Option from "@/interfaces/option";
import Select from "../Low/Select";
import { CorporateUser, TeacherUser } from "@/interfaces/user";

interface Props {
    teachers: TeacherUser[];
    corporates: CorporateUser[];
    selects: (Option | null | undefined)[];
    onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
}

export default function WorkflowStepSelects({
    teachers,
    corporates,
    selects,
    onSelectChange,
}: Props) {

    const teacherOptions: Option[] = teachers.map((teacher) => ({
        value: teacher.id,
        label: teacher.name,
        icon: () => <img src={teacher.profilePicture} alt={teacher.name} />
    }));
    const corporateOptions: Option[] = corporates.map((corporate) => ({
        value: corporate.id,
        label: corporate.name,
        icon: () => <img src={corporate.profilePicture} alt={corporate.name} />
    }));

    return (
        <div
            className={"flex flex-wrap gap-0"}
        >
            {selects.map((option, index) => {
                let classes = "px-2 rounded-none";
                if (index === 0 && selects.length === 1) {
                    classes += " rounded-l-2xl rounded-r-2xl";
                } else if (index === 0) {
                    classes += " rounded-l-2xl";
                } else if (index === selects.length - 1) {
                    classes += " rounded-r-2xl";
                }

                return (
                    <div key={index} className="min-w-fit">
                        <Select
                            options={[...teacherOptions, ...corporateOptions]}
                            value={option}
                            onChange={(option) => onSelectChange(selects.length, index, option)}
                            placeholder={"Approval By:"}
                            flat
                            isClearable
                            className={classes}
                        />
                    </div>
                );
            })}
        </div>
    );
}