import {useState, useEffect} from 'react';
import OnBoarded from '../../../../SVG/OnBoarded';
import ToBeOffboarded from '../../../../SVG/ToBeOffboarded';
import Offboarded from '../../../../SVG/OffBoarded';
import ScheduledToBeOffboarded from '../../../../SVG/ScheduledToBeOffboarded';
import "./BoardingStatusIcon.scss";

type BoardingStatusIconProps = {
    type: string
}

const BoardingStatusIcon = ({type}: BoardingStatusIconProps) => {

    const [boardingIcon, setBoardingIcon] = useState<any>('');

    useEffect(() => {
        switch (type) {
        case "Οnboarded":
            setBoardingIcon(<OnBoarded/>);
            break;

        case "To Be Offboarded":
            setBoardingIcon(<ToBeOffboarded/>);
            break;

        case "Offboarded":
            setBoardingIcon(<Offboarded/>);
            break;

        case "Scheduled To Be Offboarded":
            setBoardingIcon(<ScheduledToBeOffboarded/>);
            break;

        default:
            setBoardingIcon('--');
        }
    }, [type]);

    return (
        <div className='status-con-container'>
            {boardingIcon}
        </div>
    );
}

export default BoardingStatusIcon;