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

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

export default function WorkflowStepSelects({
    approvers,
    selects,
    placeholder,
    onSelectChange,
    isCompleted,
}: 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={approvers}
                            value={option}
                            onChange={(option) => onSelectChange(selects.length, index, option)}
                            placeholder={placeholder}
                            flat
                            isClearable
                            className={classes}
                            disabled={isCompleted}
                        />
                    </div>
                );
            })}
        </div>
    );
}