import { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
import { useState } from 'react';
import styles from './Options.module.scss';

interface OwnProps {
    options: string[];
    isSelected: (option: string) => void;
}

const Options: React.FC<OwnProps> = (props) => {

    const [selected, setSelected] = useState<string>("null");

    if (selected !== "null") props.isSelected(selected);

    const options = props.options.map((option, key) => {
        return (
            <IonItem lines='none' key={key} className={styles.options + " " + (option === selected) ? styles.highlighted : ""}>
                <IonLabel>{option}</IonLabel>
                <IonRadio mode='md' slot="start" value={option} />
            </IonItem>
        );
    });

    return (
        <div className={styles.optionHolder}>
            <IonList>
                <IonRadioGroup onIonChange={e => setSelected(e.detail.value)}>
                    {options}
                </IonRadioGroup>
            </IonList>
        </div>
    );
}

export default Options;