import { useTranslation } from 'react-i18next';

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

    return <div className='bg-[#1C1C1C] text-white flex flex-col border-1 border-[#757575] rounded-xl text-left p-4 justify-center font-light'>
        <h1 className='text-xl font-bold'>{t("landing.skills.title")}</h1>

        <div className="flex flex-col md:flex-row gap-4 md:gap-0 justify-between">
            <div className="flex flex-col">
                <p className='text-xl md:text-base'>{t("landing.skills.languages")}</p>
                <p className='text-blue-400'>HTML</p>
                <p className='text-red-400'>React</p>
                <p className='text-orange-300'>TypeScript</p>
                <p className='text-blue-500'>C</p>
                <p className='text-purple-500'>GO</p>
                <p>{t('landing.skills.more')}</p>
            </div>

            <div className="flex flex-col">
                <p className='text-xl md:text-base'>{t("landing.skills.tools")}</p>
                <p className='text-blue-400'>JetBrains</p>
                <p className='text-red-400'>Visual Studio Code</p>
                <p className='text-orange-300'>Termius</p>
                <p className='text-blue-500'>AutoCAD</p>
                <p className='text-violet-500'>Proxmox</p>
                <p className='text-cyan-500'>Cloudflare</p>

                <p>{t('landing.skills.more')}</p>
            </div>

            <div className="flex flex-col">
                <p className='text-xl md:text-base'>{t("landing.skills.softskills.title")}</p>
                <p className='text-red-400'>{t("landing.skills.softskills.adaptability")}</p>
                <p className='text-emerald-500'>{t("landing.skills.softskills.problem_solving")}</p>
                <p className='text-cyan-300'>{t("landing.skills.softskills.creativity")}</p>
                <p className='text-purple-500'>{t("landing.skills.softskills.time_managment")}</p>
                <p className='text-purple'>{t("landing.skills.softskills.hard_work")}</p>
            </div>
        </div>
    </div>;
}