import { useTranslation } from 'react-i18next';

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

    const skillCategories = [
        {
            title: 'skills.languages.title',
            skills: ['Python', 'JavaScript/TypeScript', 'Java', 'C', 'SQL', 'HTML/CSS', 'Bash']
        },
        {
            title: 'skills.frameworks.title',
            skills: ['React', 'Node.js', 'Django', 'FastAPI', 'TailwindCSS', 'Bootstrap']
        },
        {
            title: 'skills.tools.title',
            skills: ['Git', 'Docker', 'Linux', 'PostgreSQL', 'MongoDB', 'REST API']
        },
        {
            title: 'skills.other.title',
            skills: ['Agile/Scrum', 'CI/CD', 'Test unitaires', 'Architecture logicielle']
        }
    ];

    return (
        <section id="skills" className="py-20 px-8">
            <div className="max-w-4xl mx-auto">
                <h2 className="text-4xl font-bold mb-12 text-accent">{t('skills.title')}</h2>
                <div className="grid md:grid-cols-2 gap-8">
                    {skillCategories.map((category, index) => (
                        <div key={index} className="bg-secondary/5 p-6 rounded-lg border border-secondary/10">
                            <h3 className="text-xl font-semibold mb-4 text-secondary">{t(category.title)}</h3>
                            <div className="flex flex-wrap gap-2">
                                {category.skills.map((skill, skillIndex) => (
                                    <span 
                                        key={skillIndex}
                                        className="px-4 py-2 bg-accent/10 text-accent border border-accent/20 rounded-full text-sm font-medium hover:bg-accent/20 transition-all"
                                    >
                                        {skill}
                                    </span>
                                ))}
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default Skills;