import { useTranslation } from 'react-i18next'
import { useLanyardWS } from 'use-lanyard';
// import data from '../data.ts';


export const Whoami = () => {
    const { t } = useTranslation();

    const data = useLanyardWS('821421438719492136', {
        api: { hostname: 'api.lanyard.alekswilc.dev', secure: true }
    });

    const customStatus = data && data.activities.find(x => x.id === 'custom');



    return <div className="flex flex-col md:flex-row gap-4 ">
        <div className='bg-[#1C1C1C] text-white flex flex-col border-1 border-[#757575] rounded-xl text-left p-4 grow basis-1'>
            <h1 className='text-xl font-bold'>{t('landing.title')}</h1>

            <p className='font-light'>{t('landing.whoami')}</p>
        </div>

        { data && <div className='bg-[#1C1C1C] text-white flex flex-col border-1 border-[#757575] rounded-xl text-left p-4 grow basis-1'>
            <div className="flex flex-row gap-6">
                <div className="flex-col justify-center hidden md:flex">
                    <img src="https://www.alekswilc.dev/avatar.jpg" alt="avatar" className='max-w-42 rounded-xl' />
                </div>
                 <div className='flex flex-col justify-center'>
                    <h1 className='text-xl font-bold'>{data.discord_user.global_name} - Discord Profile</h1>

                    <div className="flex flex-col justify-center">
                        {
                            customStatus &&
                            <p className='font-extralight text-gray-300'>{customStatus.state}</p>
                        }
                        {
                            data.spotify &&
                            <>
                                <p className='font-bold'>{t("landing.discord.listening")}</p>
                                <p className='font-light'>{t("landing.discord.song", { song: data.spotify.song, artist: data.spotify.artist })}</p>
                            </>
                        }
                        {
                            data.activities.filter(x => x.name !== 'Spotify' && x.id !== 'custom').sort((a, b) => a.state ? b.state ? 1 : -1 : -1).map((activity) =>
                                <>
                                    <p className='font-bold'>{t("landing.discord.playing", { app: `${activity.name}${activity.state ? ':' : ''}` })}</p>
                                    {activity.details && <p className='font-light'>{activity.state ? `${activity.state} - ${activity.details}` : activity.details }</p>}
                                </>
                            )
                        }
                    </div>
                </div>
            </div> 
        </div> }
    </div>;
}