import * as React from 'react';
import $ from 'jquery';

export default function TwoRowDepart({ number, timing, gare, type, departure }) {

    React.useEffect(() => {
        switch (type) {
            case 'TGV':
                $('.train-logo').addClass('train-logo-tgv');
                break;
            case 'OUIGO':
                $('.train-logo').addClass('train-logo-ouigo');
                break;
            case 'TER':
                $('.train-logo').addClass('train-logo-ter');
                break;
            default:
                $('.train-logo').addClass('train-logo-sncf');
                break;
        }
    }, []);

    return (
        <div className='row-train row-group-2 row-group'>
            <div className='row'>
                <div className='col-first'>
                    <div className='train-logo'></div>
                </div>
                <div className='col-second-first'>
                    <div className='animation-blink'>
                        <div className='animation-blink-1'>
                            <span className='text-type'>{type}</span>
                            <br />
                            <span className='text-number'>{number}</span>
                        </div>
                        <div className='animation-blink-2 text-features-1'>{timing}</div>
                    </div>
                </div>
                <div className='col-second-second'>{departure}</div>
                <div className='col-second-third'>
                    <span>{gare}</span>
                </div>
                <div className='col-hide'></div>
                <div className='col-third'>

                </div>
            </div>
            <div className='row'>
                <div className='col-first'></div>
                <div className='col-second'>
                    <div className='text-scroll-x'></div>
                </div>
                <div className='col-third'></div>
            </div>
        </div>
    );
}