import '../css/global.css'
import BlackButton from './components/customButton'
import { useState, useEffect } from 'react';

function languageSelection() {
    const [lang, setLang] = useState(() => {
        return sessionStorage.getItem("lang") || '';
    });

    useEffect(() => {
        sessionStorage.setItem("lang", lang);
    }, [lang]);

    return (
        <div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100vh',
            flexDirection: 'column',
        }}>
        <label className='title'>Please choose a language</label>
        <label className='title'>กรุณาเลือกภาษาที่ต้องการ</label>

        <div style={{
            display: 'flex',
            flexDirection: 'row',
            gap: '1rem',
            marginTop: '1rem'
        }}>
        <BlackButton text="ภาษาไทย" to='/warn' onClick={(e) => {
            setLang("Thai");
        }}/>
        <BlackButton text="English" to='/warn' onClick={(e) => {
            setLang("English");
        }}/>
        </div>
        </div>
    );
}

export default languageSelection