import { useTranslation } from 'react-i18next';

const Education = () => {
    const { t } = useTranslation();

    const educations = [
        {
            period: '2018 - 2021',
            title: 'education.degree1.title',
            school: 'education.degree1.school',
            description: 'education.degree1.description'
        },
        {
            period: '2015 - 2018',
            title: 'education.degree2.title',
            school: 'education.degree2.school',
            description: 'education.degree2.description'
        }
    ];

    return (
        <section id="education" className="py-20 px-8 bg-secondary/5">
            <div className="max-w-4xl mx-auto">
                <h2 className="text-4xl font-bold mb-12 text-accent">{t('education.title')}</h2>
                <div className="space-y-6">
                    {educations.map((edu, index) => (
                        <div key={index} className="bg-primary p-6 rounded-lg border border-secondary/10 hover:border-accent/50 transition-all">
                            <div className="flex flex-col md:flex-row md:justify-between md:items-start mb-3">
                                <div>
                                    <h3 className="text-xl font-semibold text-secondary mb-1">{t(edu.title)}</h3>
                                    <p className="text-accent font-medium">{t(edu.school)}</p>
                                </div>
                                <span className="text-secondary/60 text-sm md:text-base mt-2 md:mt-0">{edu.period}</span>
                            </div>
                            <p className="text-secondary/70">{t(edu.description)}</p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default Education;
