import React, {Dispatch, SetStateAction} from "react";
import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";

interface SelectOption {
    label: string,
    value: string,
}

interface SelectOptionFieldProps {
    label: string,
    options: SelectOption[],
    setOptionValue: Dispatch<SetStateAction<string>>,
    isRequired?: boolean,
    isDisabled?: boolean,
    icon?: IconDefinition,
}

export default function SelectOptionField(
    {
        label,
        options,
        setOptionValue,
        isRequired = false,
        isDisabled = false,
        icon
    }: SelectOptionFieldProps
) {
    return (
        <div
            className={'flex justify-start items-center gap-2 px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none w-full hover:bg-secondary hover:border-secondary focus-within:border-primary focus-within:ring-4 focus-within:ring-primary/20 focus-within:bg-secondary transition-all duration-200'}>
            {
                icon && <FontAwesomeIcon icon={icon} className={'text-primary w-4 h-4'}/>
            }
            <select onChange={(e) => setOptionValue(e.target.value)}
                    className={'w-full bg-transparent text-text-primary border-none outline-none font-medium disabled:opacity-50 disabled:cursor-not-allowed'}
                    required={isRequired}
                    disabled={isDisabled}>
                <option value={''} defaultChecked={true} hidden={true}
                        className="bg-tertiary">{label}{isRequired ? ' *' : ''}</option>
                {options.map((option: SelectOption) => (
                    <option key={option.value} value={option.value}
                            className="bg-tertiary text-text-primary">{option.label}</option>
                ))}
            </select>
        </div>
    )
}