import { useTranslation } from 'react-i18next'

export const Projects = () => {
    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.projects.title")}</h1>

        <div className="flex flex-col gap-4 pt-4">
            <div className="flex flex-row gap-4 basis-1">
                <div className='bg-[#1C1C1C] text-white flex border-1 border-[#757575] rounded-xl text-left p-4 flex-col md:flex-row basis-1 grow'>
                    <div className='flex flex-col justify-center text-center items-center'>
                        <img alt='image' className='w-20 rounded md:pr-4' src='https://cdn.alekswilc.dev/0dab8e0d-fcc9-481a-9a58-5ebb5a9dda39.png' />
                    </div>

                    <div className='flex flex-col justify-center'>
                        <h1 className='text-xl font-bold'>{t("landing.projects.projects.simrailpro.title")}</h1>
                        <p className='font-light'>{t("landing.projects.projects.simrailpro.descripton")}</p>
                    </div>
                </div>
                <div className='bg-[#1C1C1C] text-white flex border-1 border-[#757575] rounded-xl text-left p-4 flex-col md:flex-row basis-1 grow align-center'>
                    <div className='flex flex-col justify-center text-center items-center'>
                        <img alt='image' className='w-20 rounded md:pr-4' src='https://cdn.alekswilc.dev/431d2c3e-746b-41f5-9899-d4e1ee81c0cf.png' />
                    </div>

                    <div className='flex flex-col justify-center'>
                        <h1 className='text-xl font-bold'>{t("landing.projects.projects.cocorp.title")}</h1>
                        <p className='font-light'>{t("landing.projects.projects.cocorp.descripton")}</p>
                    </div>
                </div>

            </div>
        </div>
    </div>;
}