import Option from "@/interfaces/option";
import Select from "../Low/Select";

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

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

    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="w-[275px]">
                        <Select
                            options={[...teachers, ...corporates]}
                            value={option}
                            onChange={(option) => onSelectChange(selects.length, index, option)}
                            placeholder={placeholder}
                            flat
                            isClearable
                            className={classes}
                        />
                    </div>
                );
            })}
        </div>
    );
}